How to use markdown codeblock with highlighting in Ulysses.
Apr 27, 2018
2 minute read

Ulysses is the best writing tool on the mac but is unusable to the programmer. Because it sucks when using code block. Without language highlighting, reading code is a difficult thing.

using makedown-it.js and highlight.js to render codeblock

add ~~ as prefix into every line of codeblock

~~ ```json
~~ { "where": "xiamen", "date": "18-04-28" }
~~ ```
~~
~~ ```python
~~ def hello_world():
~~    print('hello world')
~~
~~ hello_world()
~~ ```

then insert this three lines into <div class="md_codeblock"></div>

~~ <div class="md_codeblock">
~~ ```json
~~ { "where": "xiamen", "date": "18-04-28" }
~~ ```
~~
~~ ```python
~~ def hello_world():
~~    print('hello world')
~~
~~ hello_world()
~~ ```
~~ </div>

last step! insert the JS code into the foot of the document.

~~ <div class="md_codeblock">
~~ ```json
~~ { "where": "xiamen", "date": "18-04-28" }
~~ ```
~~
~~ ```python
~~ def hello_world():
~~    print('hello world')
~~
~~ hello_world()
~~ ```
~~ </div>
~~
~~ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/8.4.1/markdown-it.min.js"></script>
~~ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
~~ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/json.min.js"></script>
~~ <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/python.min.js"></script>
~~ <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/gruvbox-dark.min.css"></link>
~~ <script>
~~     var md = new markdownit({
~~         highlight: function (str, lang) {
~~             if (lang && hljs.getLanguage(lang)) {
~~                 try {
~~                     return hljs.highlight(lang, str).value;
~~                 } catch (__) {}
~~             }
~~             return ''; // use external default escaping
~~         }
~~     });
~~     var mdCodeblocks = document.querySelectorAll('.md_codeblock')
~~     for (const node of mdCodeblocks) {
~~         var text = node.textContent;
~~         text = text.slice(1, text.length - 1);
~~         text = text.trim();
~~         text = text.replace(/\t/g, '');
~~         console.error(text);
~~         node.innerHTML = md.render(text); 
~~     } 
~~ </script>

Press + SHIFT + p then Bang!!!

{ "where": "xiamen", "date": "18-04-28" }
def hello_world():
    print('hello world')

hello_world()


comments powered by Disqus