How can I display a code example (HTML plus EE-tags) in my blog post

Question

In my blogpost (SE-page) I want this code to be treated as text and not as code since I want to show it as an example.

<a href="http://{exp:low_replace find="http://"}{linklist_url}{/exp:low_replace} 
"target="_blank">{title}</a>

I wrapped it in <code></code>-Tags, but it didn´t work. It renders to

<a href="http://{linklist_url} "target="_blank">Im the actual title of the entry</a>

and the source is

<code>
<a href="http://{linklist_url} "target="_blank">Im the actual title of the entry</a>
<br>
</code>

When I use the EE tag [code] while entering the text in the CP I have the follwing in my Matrix TinyMCE field:

[code]<a href="http://{exp:low_replace find="http://"}{linklist_url}{/exp:low_replace} "target="_blank">{title}</a>
[/code]

When I submit my blog entry in the CP I see a nicely formatted and colorcoded string on the "view entry" page.

When I let EE the page render I see

[code]<a href="http://{linklist_url} "target="_blank">Im the actual title of the entry</a>
[/code]

Same case as above. EE renders the {title} field and low_replace. The only difference is, that I have the surrounding [code] tags.

Why do the low_replace add-on and the {title} get rendered and how do I stop this?

EDIT: Removed the part with Allow EE, since it led to confusion and edited the title for clarity.

Answer 1

EE has a native code formatting feature which is essentially a wrapper for highlight_string. Just use [code] tags to trigger it. For example this:

[code]
$foo = 'bar';
[/code]

Will output the following markup:

<div class="codeblock"><code><span style="color: #000000">
    <span style="color: #0000BB">$foo&nbsp;</span><span style="color: #007700">=&nbsp;</span><span style="color: #DD0000">'bar'</span><span style="color: #007700">;&nbsp;</span>
</span></code></div>

You can choose your own colours by adjusting various PHP INI directives. For a live example of this see my addon documentation.

Answer 2

On my blog (example post here) I'm using GWcode SyntaxHighlighter in combination with wygwam. Basically I write my post as normal and any code I want I then use the "code" button in wygwam and voila beautifully highlighted with line numbers.

Answer 3

You need to encode all your curly braces in your code samples to make sure they aren't parsed by EE at some point.

Use { for { and } for }.

Some EE WYSIWYG editors will do this for you in code blocks, but you'll have to check the source to be sure.

Answer 4

I had pretty much the same issue with the Rich Text Editor module, and got round this issue by embedding a GitHub Gist instead, which works very well except for that when you go to edit a previously saved channel entry, you have to paste in the JavaScript embed code again.

Answer 5

You wouldn't want the {allow-decode} plugin, since that would do as you expect, allow the ee code to be rendered.

You have two issues here. You have ExpressionEngine code/tags and html/xhtml code tags. Obviously, an entry into EE will allow for html/xhtml to be rendered. So

<a href="http://{exp:low_replace find="http://"}{linklist_url}{/exp:low_replace} "target="_blank">{title}</a>

may come out looking like

{title}

but the click link would still have the code, {exp:low_replace} or {link list_url} in it.

You want something that converts all the code into html entities. A number of the text editor fields will do this for you, such as WygWam from Pixel & Tonic or Espresso by Put Your Lights On.

You'll need <pre><code> to preserve spacing, and obviously whatever styling you want to employ. Applying colors to different types of code is more complicated, but doable, with <span> classes.

Answer 6

I recommend using Prism.js for syntax highlighting.

http://prismjs.com/

I have made an EE syntax highlighter that I find better than the available solutions. I tried really break down each tag, and it's under active development. Prism.js is super lightweight and really faster, and adds no bloat to the page. Eventually it would be nice to have some sort of EE plugin for stuff (not sure what it would do), but the raw JS is just as good.

https://github.com/objectivehtml/prismjs-for-expressionengine

The other answers in this thread are always good too, but main difference is they don't utilize Prism.js, which is key for me. I have tried a lot of syntax highlighter, and really pleased with the API of Prism.js, which only took a matter of minutes to understand.

And to help write examples with EE code (not sure you need it specifically but others may), I use the HTML entity for it. If you remove the first bracket, the rest of the tag is void. (Conditionals need every first bracket replaced.)

<pre class="language-ee"><code>
&#123;exp:channe:entries}

    <h1>Your header</h1>

    &#123;if segment_2}

        ....

    &#123;/if}

    ....

{/exp:channe:entries}
</pre><code>

My Prism.js syntax highlighter automatically trims and converts HTML tags to output correctly, so no entity needed there. (Obviously in the Prism.js highlighter you would see the bracket and not the entity, this example is how you would type it.)

Answer 7

Loading a whole template file without parsing it
Check out Template Code by rob-sanchez.
It should get you what you want.

Show data from entry-fields unparsed
This is how EE works by default. Nothing from Entries is ever parsed.
Allow EE Code enables this for you.

If you enter "some {type_tag} with {number} tags in it" as the value of a field in an entry it should show up as "some {type_tag} with {number} tags in it".

But if you use Allow EE Code you get "some {value of type_tag} with {value of number} tags in it" If there are nothing matching your custom tags the tag itself should be displayed.

Replace every special-char with its html entity
As i mentioned in the comment below, Checkout EEncode it should run everything in between its tag through html_entities.