Guillaume's Thoughts: Blogger, StackEdit and SyntaxHighlighter

TL;DR

Enable SyntaxHighlighter on blogger using StackEdit:

Disable syntax highlight from StackEdit (settings -> Markdown extra -> Synax)
Add the following to your Blogger template within <head> block:

    <link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css' rel='stylesheet' type='text/css'/>
    <link href='http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushBash.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCpp.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPython.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushRuby.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushSql.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js' type='text/javascript'/>
    <script language='javascript' src='http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJScript.js' type='text/javascript'/>
    <script language='javascript' src='https://rawgit.com/creack/GolangHighlighter/master/shBrushGo.js' type='text/javascript'/>
    <script language='javascript' src='https://rawgit.com/hekt/1979689/raw/7c93d3e7df76e80c87a7718bb14f0b7b4eb37997/shBrushMarkdown.js' type='text/javascript'/>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <script language="javascript" type="text/javascript">
      $(function() {
        // for each pre class="prettyprint"
        $("pre.prettyprint").each(function(a, e) {
          // extract language name
          lang=$($(this).context.innerHTML).attr('class').replace('language-', '');
          // extract html from code into pre
          $(this).html($($(this).context.innerHTML).html())
          // set the pre class to "brush: language"
          $(this).attr('class', 'prettyprint brush: ' + lang);
        })
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.config.clipboardSwf = "http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf";
        SyntaxHighlighter.all();
      }
    );
    </script>

Finally, a usable blog editor

I have been looking for a nice way to write my blog article for a while.

I tried Ghost, the native Blogger editor, wordpress but all of them, while usable, were not generic enough and difficult to use.

I then moved to LaTex. I loved it. I managed to do wonderful PDF, however, when I tried to publish articles as HTML, it has been a pain. The tools to compile latex to HTML are really far from being usable.

Recently, I discovered StackEdit, which allow you to write in markdown and publish anywhere, including Blogger.

StackEdit

I now write everything on StackEdit, blog articles and any other documents. It allows me to have everything in markdown, which is supported (nearly) everywhere.

Syntax Highlight

By default, StackEdit comes with highlight.js, which is nice, but I am used to SyntaxHighlighter, so I wanted to keep using it.

StackEdit code formatting.

First, it might not be obvious, in order to set a block for a given language in markdown, we use the following syntax:

```bash
ls -l /
\```

This will generate the following html:

<pre class="prettyprint">
<code class="language-bash">
ls -l
</code>
</pre>

syntaxHighlighter expects code like this:

<pre class="brush: bash">
ls -l
</pre>

So, very naively, let’s simply import jQuery and rewrite on the fly the StackEdit generated code with the expected one :)

// for each <pre class="prettyprint">
$("pre.prettyprint").each(function() {
      // extract language name
      lang=$($(this).context.innerHTML).attr('class').replace('language-', '');
      // extract html from <code> and inject it into <pre>
      $(this).html($($(this).context.innerHTML).html())
      // set the <pre> class to "brush: language"
      $(this).attr('class', 'prettyprint brush: ' + lang);
    })

Now simply add this in the onLoad and call syntaxHighlighter (see tl;dr for full example).

Written with StackEdit.

Guillaume's Thoughts

Saturday, September 13, 2014

Blogger, StackEdit and SyntaxHighlighter

TL;DR

Finally, a usable blog editor

StackEdit

Syntax Highlight

StackEdit code formatting.

1 comment: