Integrate Crayon highlighter with Markdown Editor in WordPress

Two things have to be changed:

  1. We have to move language specifier from <code class= to <pre lang=.
  2. The newline at the end of code block needs to be removed.

Here’s the diff:

diff -uNr a/includes/class-markdown-parser.php b/includes/class-markdown-parser.php
--- a/includes/class-markdown-parser.php    2019-01-05 00:00:00.000000000 -0500
+++ b/includes/class-markdown-parser.php    2019-01-05 00:00:00.000000000 -0500
@@ -44,7 +44,7 @@

 # Class attribute for code blocks goes on the `code` tag;
 # setting this to true will put attributes on the `pre` tag instead.
-@define( 'MARKDOWN_CODE_ATTR_ON_PRE',   false );
+@define( 'MARKDOWN_CODE_ATTR_ON_PRE',   true );



@@ -2819,12 +2819,13 @@
        if ($classname != "") {
            if ($classname{0} == '.')
                $classname = substr($classname, 1);
-           $attr_str = ' class="'.$this->code_class_prefix.$classname.'"';
+           $attr_str = ' lang="'.$this->code_class_prefix.$classname.'"';
        } else {
            $attr_str = $this->doExtraAttributes($this->code_attr_on_pre ? "pre" : "code", $attrs);
        }
        $pre_attr_str  = $this->code_attr_on_pre ? $attr_str : '';
        $code_attr_str = $this->code_attr_on_pre ? '' : $attr_str;
+       $codeblock = preg_replace('/\n$/', '', $codeblock);
        $codeblock  = "<pre$pre_attr_str><code>$codeblock</code></pre>";

        return "\n\n".$this->hashBlock($codeblock)."\n\n";

In the meantime, I added a “text” language to Crayon highlighter and set it as the default language, so that Crayon won’t apply highlight the code block when no language is specified:

[wp-content/plugins/crayon-syntax-highlighter/langs]$ cat text/text.txt
    NAME                Text
    VERSION             1.0

    COMMENT             //
    STRING              //

    STATEMENT           //
    RESERVED            //
    TYPE                //
    MODIFIER            //

    ENTITY              //
    VARIABLE            //
    IDENTIFIER          //
    CONSTANT            //
    OPERATOR            //
    SYMBOL              //

Leave a Reply

Your email address will not be published. Required fields are marked *