Adding {% raw %} tags to <pre> tags in my blog

Developer Support CMS Development
1

This one’s just for the nerds :joy: but I wanted to show it off and see if anyone else came up with any solutions.
On my blog I end up writing about hubl a lot. So I end up having to use {% raw %} tags a lot.
To speed this up I added some filters to my template that automatically adds {% raw %} tags to <pre> tags.

{% set modified_content = content.post_body|replace('<pre>', '<pre>{% raw %}')|replace('</pre>', '{% endraw %}</pre>')|replace('<raw>', '{% raw %}')|replace('<endraw>', '{% endraw %}')|replace('< raw >','<raw>')|replace('< endraw >','<endraw>') %}

{% if request.postDict.inpageEditorUI %}
{{ content.post_body }} 
{% else %} 
{{ modified_content }}
{% endif %}

You’ll note that there’s a number of other filters there, because it’s weirdly hard to write about {% raw %} tags :sweat_smile: it’s almost a recursive loop of filters, but not quite.

You’ll also notice that we’re not using the filtered content on the edit page. For whatever reason post_body content hates getting messed with on the edit page.

It’s still not perfect, sometimes the richtext editor with thow a span in there than messes everything up (It throws a <span> in the works! Ha!) But I think it’s going to be really hand for me when writing about hubl going forward.

Did a bit of a write up on it here.

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

2

Fellow nerd checking in :nerd_face: Thanks for sharing, @BarryGrennan :raising_hands: — Jaycee

3

Nice one @BarryGrennan!

Here’s something I’ve done quite a while ago(when there was no dnd for blog posts):

I’ve implemented https://prismjs.com/ and had written the blog-post module code like this:

{# start code #}
{% if row.type == "code"%}
	<div class="container">
		<strong class="codeHeadline">
			{% if row.code.file_type == "django" %}
			HTML + Hubl
			{% elif row.code.file_type == "js" %}
			JavaScript
			{% else %}
			{{row.code.file_type|upper}}
			{% endif %}
		</strong>
		<pre class="language-{{row.code.file_type}} line-numbers">
<code>
{% if row.code.file_type == "css" %}
 {{ row.code.code_text|escape }}
{% elif row.code.file_type == "html" %}
 {{ row.code.code_text|escape }}
{% elif row.code.file_type == "django" %}
 {{ row.code.code_text|escape|escape_jinjava }}
{% elif row.code.file_type == "js" %}
 {{ row.code.code_text|escapejs }}
{% elif row.code.file_type == "json" %}
 {{ row.code.code_text|escapejson }}
{% endif %}

</code>
</pre>
	</div>
{% endif %}

nowadays I would propably do it differently, but it worked after I’ve made slight changes to the django highlighter