Search code examples
wordpressmarkdownsyntax-highlighting

How to make code syntax highlighters compatible?


There are several tags used for code syntax highlighters, such as pre and code. How to make them compatible at the same site?

# Use PreCode for Windows Live Writer
<pre class="brush: py; toolbar: false;">
...
</pre>

# Install the plugin SyntaxHighlighter Evolved (for WordPress), the source codes will render as:
<div id="highlighter_539499" class="syntaxhighlighter  python">
...
</div>

# in markdown, insert code blocks by:
```python
...
```
# will render as:
<pre><code class="python">
...
</code></pre>

# OR
[code lang=python]
...
[/code]

PS: I install the plugin SyntaxHighlighter Evolved, use PreCode in Windows Live Writer for offline blogging and WP markdown editor for online blogging.


Solution

  • Frustratingly, there is no standard for this. The HTML5 Spec provides a suggestion, but then specifically stats that it is not a formal specification:

    There is no formal way to indicate the language of computer code being marked up. Authors who wish to mark code elements with the language used, e.g. so that syntax highlighting scripts can use the right rules, can use the class attribute, e.g. by adding a class prefixed with "language-" to the element.

    An example is also provided:

    The following example shows how a block of code could be marked up using the pre and code elements.

    <pre><code class="language-pascal">var i: Integer;
    begin
       i := 1;
    end.</code></pre>
    

    A class is used in that example to indicate the language used.

    As it is only a suggestion, no one is required to follow it. My suggestion would be to file a bug report with any syntax highlighting project which does not support the HTML5 suggested format. If they don't want to break backward compatibility with their existing users (understandable), they can always add on a second format (some projects have already done this). If everyone did this, then eventually everyone would be using the same format and the current disparity would no longer exist. If you need some arguments for why the HTML5 spec is a good format, my rather lengthy analysis (from a few years back) may be helpful.

    One final remark about the "language-" prefix. While some highlighters do accept it, I have not seen any that require it. And, in fact, most Markdown implementations (which support the [non-standard] fenced-code-blocks) do not insert the prefix. If you really wanted the prefix, then you can add it yourself to your Markdown:

    ```language-python
    ...
    ```
    

    I have also come across some highlighters which also accept the alternate prefix: "lang-". My point is that the prefix part of the suggestion seems to be the weakest link and I would not expect to see any consistency there. Of course, a formal specification would clear this up, but until then, we can only work with what we have.