Can't output plain html with raw filter

1

HI!
Currently, I’m implementing a third-party slider.
To make things a little bit easier I manager to insert a plain html code into markdown.
As for output I’ve set a custom template which is pretty simple, it’s consists of a three parts:

  1. assets combination
  2. data output
  3. custom JS init
{% block stylesheets %}
	{% do 
		assets.addCss('theme://css/some.css') %}	

{% endblock %}
{{ assets.css()|raw }}

{% block javascripts %}
	{% do 
		assets.addJs('theme://js/some.js') %}	
{% endblock %}
{{ assets.js()|raw }}		

<div id="slider" style="width:1000px;height:100vh;margin:0 auto;margin-bottom: 0px;">
	{% block content %}
		{{ page.content|raw }}
	{% endblock %}
</div>

<script type="text/javascript">

	$(document).ready(function() {
	
	var url = '{{ theme_url }}';
		
		$('#slider').slider({			
		   ..init code
		});
	});

</script>

The problem is that the code from markdown is wrapped into two tags:
<pre> and <code>

If I set html filter I get only two divs rendered.

2

@01K, Curious about the page which contains plain HTML. The Markdown should be parsed into HTML and the embedded HTML should be left alone.

I’ve never seen HTML embedded in markdown being wrapped inside <pre><code> tags.

3

It’s just a harcoded html code pasted into a markdown:

<!-- Slide 1..N-->
<div class="slide" data-l="bgsize:cover; bgposition:50% 50%; duration:4000; >
	<img width="1920" height="1080" src="images/bg.jpg" class="bg" alt="" />
	<img width="1280" height="768" src="images/slide-1.jpg" alt="" />
and so on
</div>

Just using it as a UI for editing the image paths and making other edits.

But as a output it gets:
image

4

@01K, Adding closing quotes might do miracles…

After adding a closing quoted all displays fine in page Typography of fresh Grav install.

5

Sorry, if I understood right, you mean <div>'s ?
They are all closed (<div>content</div>) in my markdown instance…

6

No, I mean quotes, like "

7

Understood :slight_smile:
oh, I’ve got several hundreds of that quotes in that particular code…
So, it seems that there is only one solution - to move all the code from markdown into html.twig template

8

@01K,

So, it seems that there is only one solution - to move all the code from markdown into html.twig template

That shouldn’t be necessary…

Here is a hint:

data-l="bgsize:cover; bgposition:50% 50%; duration:4000; >               
                                   -------------------- ^
9

ah, it was my typo in this thread, I’ve just reduced the data attributes for the sake of example. The code itself in the .md doesn’t have those spaces :confused:

But I also have tested the output with a simple <div> blocks, and in it still renders as a text, not a code…

I’ve set those advanced settings to off to meet Grav 1.7 requirements

image
image751×115 1.59 KB

I’ve got a running website, which was upgraded from Grav 1.7 and have compatibility modes set to “yes”. There I’ve post a similar page with html and it does work…

10

@01K,

The code itself in the .md doesn’t have those spaces

Spaces? I was hinting at a missing quote "…

11

sorry, I wasn’t watchful enough.
In the code quotes were in place, but I think I found a clue, correct me if I am wrong.
I’ve pasted the code once more in markdown eliminating so spaces, and voila, everything is rendered in place. So, does the compatibility mode strictly check the formatting issues?

12

@01K, I’m using a fresh Grav 1.7 installation and have not altered any compatibility settings.

I would not alter the Grav 1.7 default compatibility Twig settings because auto-escape has been added to Grav 1.7 to prevent XSS (cross-site scripting) attacks.

When altering the compatibility modes as shown in the upgrade manual, your site is again vulnerable to the XSS attacks as was the case for Grav 1.6.

Use filter |raw in Twig if fields (like page.content) contain HTML code that needs to be preserved and not escaped.

By the way, the compatibility settings have nothing to do with the <pre><code> issue you experienced. I believe that was caused by a syntax error in the code.

1 Like
13

Because my project was updated from 1.6 to 1.7.x by default the compatibility feature was enabled. So, now I’ve set them (set to No) as they are in fresh Grav 1.7 installation

image
image755×216 3.76 KB