Take the 2-minute tour ×
ExpressionEngine® Answers is a question and answer site for administrators, end users, developers and designers for ExpressionEngine® CMS. It's 100% free, no registration required.

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.

share|improve this question
    
what formatting is the main field holding your code? –  erwinheiser Dec 3 '12 at 12:55
    
it´s a Matrix TinyMCE field –  awa Dec 3 '12 at 13:42
add comment

7 Answers

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.

share|improve this answer
    
Yes, but only in the CP on the view entry page. When rendered I see [code] $foo = 'bar'; [/code] as plain text. –  awa Dec 3 '12 at 14:10
    
I've just tested a [code] block within a matrix field and it does render correctly, so perhaps TinyMCE fields are incompatible with this feature. –  Dom Stubbs Dec 3 '12 at 14:24
add comment

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.

share|improve this answer
    
Looked at the code of this page. There´s a lot of DIVs, a table and a bunch of classes. Is this all done with one click on the wygwam button? Who did the coloring, e.g. having the {exp:evopost}-tag in #773481? Is this part of the GW package or is there a place where a user can edit the coloring? –  awa Dec 3 '12 at 16:21
    
that's done by the package and you have the option to include different code highlighing - i..e javascript, html, EE and others. yes all done with a wygwam button. –  CreateSean Dec 3 '12 at 16:36
add comment

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 &#123; for { and &#125; for }.

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

share|improve this answer
1  
This shouldn't be necessary if you use the [code] feature, but probably would be with alternative approaches. –  Dom Stubbs Dec 3 '12 at 17:20
    
This approach is my favorite because there are so many places the literal { and } characters can go wrong when working with ee templates. –  Mike_K Oct 26 '13 at 17:13
add comment

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.

share|improve this answer
add comment

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.

share|improve this answer
    
No, here at my site the only string in curly brackets that survived rendering is {linklist_url}, which is a custom field. The wrapping in the CSS code-tags prevents the HTML from being rendered, but everything that´s EE (curly brackets) will be rendered (besides the mentioned {linklist_url}. –  awa Dec 3 '12 at 14:18
add comment

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.)

share|improve this answer
add comment

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.

share|improve this answer
    
When I enter {exp:channel:entries channel="blog" dynamic="no" limit="10"} {title} {/exp:channel:entries} as an entry it gets parsed. I get 10 times the title of the SE page. As far as I understand you, this shouldn´t happen. Everything in curly brackets should just be outputtet as a normal string. But it is parsed. –  awa Dec 3 '12 at 14:11
    
I just did a quick test in a text-area which content is displayed inside a channel:entries loop, the tags is not parsed and are displayed correctly. I dont have a setup with TinyMCE installed right now so i cant test it with that addon. As @nonprofit_tech mentions, try to replace every char with html entities… Take a look at EEncode –  Kim Wincent Wickell Dec 3 '12 at 14:26
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.