Converting Legacy Tags to Pre Tags
If you’ve been using Crayon Mini Tags or other syntax highlighters with syntax like:
From Crayon 1.12 there is a new setting in the admin:
At the moment there are no detected legacy tags in any of my blog posts or comments. Lets add one:
Now in settings, we see the button available:
Clicking it will convert your legacy Crayon tag! Refresh the editor to see the change:
And of course, it should look exactly the same on the front end:
If you keep using the legacy tags and Crayon is disabled, it looks like this:
Since the legacy code is just text in the editor, it looks like text if Crayon isn’t enabled. The <pre> tag however looks much better as preformatted plain text, and it hides all of your settings in the class attribute.
One warning however, is to always backup your database before converting your tags - since this will change your post/comment content it’s safer to have something to rollback to.
The beta version of Crayon (1.12 at the time of writing) can be downloaded from GitHub.
UPDATE: As of the latest version, converting legacy tags now has an “encode” option. If selected, any legacy tag where the “decode” attribute is missing (neither true or false) has its code encoded and decode=”true” specified. This is useful if you have been using < and > instead of < and > in your [php] tags for example - this method is dangerous since disabling Crayon will mean these tags will be recognised as HTML tags. So something like this will actually be executed rather than displayed as code:
[php title="testing"]some code[/php]
Or any other legacy Crayon tags:
$[crayon lang="php" title="testing"]some code[/crayon]
Then you might like to convert your blog’s old code format into a better standard:
<pre class="lang:php decode:true" title="Testing">some code</pre>
The benefits are backwards compatibility (if Crayon is disabled or you use another highlighter) and the ability to use the Crayon Tag Editor in the visual editor of Wordpress).
Note: decode:true means that the code is encoded, so any < characters in the visual editor are really < in the HTML editor to ensure they are valid HTML entities.
Say I have this in Wordpress, switching to the HTML editor:
From Crayon 1.12 there is a new setting in the admin:
At the moment there are no detected legacy tags in any of my blog posts or comments. Lets add one:
Now in settings, we see the button available:
Clicking it will convert your legacy Crayon tag! Refresh the editor to see the change:
And of course, it should look exactly the same on the front end:
If you keep using the legacy tags and Crayon is disabled, it looks like this:
Since the legacy code is just text in the editor, it looks like text if Crayon isn’t enabled. The <pre> tag however looks much better as preformatted plain text, and it hides all of your settings in the class attribute.
One warning however, is to always backup your database before converting your tags - since this will change your post/comment content it’s safer to have something to rollback to.
The beta version of Crayon (1.12 at the time of writing) can be downloaded from GitHub.
UPDATE: As of the latest version, converting legacy tags now has an “encode” option. If selected, any legacy tag where the “decode” attribute is missing (neither true or false) has its code encoded and decode=”true” specified. This is useful if you have been using < and > instead of < and > in your [php] tags for example - this method is dangerous since disabling Crayon will mean these tags will be recognised as HTML tags. So something like this will actually be executed rather than displayed as code:
[html]<script>alert("bam!")</script>[/html]
The correct approach is to use encoded characters in all your HTML output; including your code snippets.