Syntax highlighting code blocks

I am currently trying out micro.blog for a coding-related blog; is there a way to get the nowadays-quite-common Markdown-extension-behaviour of being able to write:

```swift
print("Hello")
```

to get a syntax-highlighted code block like this in a blog post?

print("Hello")
1 Like

You can use that Markdown syntax, but I think currently most of the themes will ignore the language name and use the same color. The “Hello” theme (under the Design section) is the only one that I tested that will display it with syntax highlighting.

There might be a way to enable syntax highlighting for other themes, either using a Hugo config parameter or with CSS/JS, but it’s not something I’ve looked into yet.

There are JavaScript-based ways to achieve this. Take a look at highlight.js, for example.

Just a note that version 0.60.0 of Hugo supports highlighting in markdown code fences by default, but Micro.blog doesn’t support 0.60.0 yet, so the easiest way to get this going is the JavaScript based approach. The Hello theme mentioned above uses Prism.

I’d love a hand with this. I have a post where the code (mostly at the end) isn’t highlighting, and MathJax isn’t rendering the LaTeX markup. I’m almost certainly overlooking something simple about inserting a script in micro.blog, or markdown generally.

(MathJax may need an extra parameter to recognize single $ marks as delimiters, but it’s not working with the default \(...\) either.

It begins:

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async
      src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js">
</script>

Which is the MathJax part, and continues:

<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</head>

which is the highlighting part.

Then starts the post proper.

I finally got around to playing with Prism. I fairly pleased with the result. Here’s the plugin I created: plugin-prismjs

I’d be OK w/o syntax highlighting so long as <pre> tags worked as I’d expect. In my Arabica theme, if I write this:

production_local:
  service: Disk
  root: ‘/storage’

The output on the page is this (no preceeding whitespace on lines 2 or 3):

production_local:
service: Disk
root: ‘/storage’

I also tried using <pre> tags in my post rather than triple-ticks. Maybe I’m doing something wrong?

How are you posting to Micro.blog; maybe the software you’re using strips the whitespace?

I’m asking because I changed my test blog to the Arabica theme and was able to post that YAML snippet, both using code fences, and the highlight shortcode.

1 Like

Thanks, you helped me figure it out! I was probably using Markdown in a way it wasn’t meant to be used. Basically I had my code blocks in between two bullet points. Here’s a test page that tries to lay out the failing situation, followed by a working situation. It looks like the shortcode version works in both cases, but code fences fails when sandwiched between two bullet points. (I wasn’t aware of this shortcode option before now.)

The last example on the page is one more that works. It’s when I put a blank newline in between the bullets and the code block, which is written with <pre> tags. Basically:

* Bullet point 1

<pre>
production_local:
  service: Disk
  root: '/storage'
</pre>

* Bullet point 2

What does your raw Markdown look like? For me, the following snippet renders as expected.

* Bullet point 1
    ```
    production_local:
      service: Disk
      root: ‘/storage’
    ```
* Bullet point 2

Note that I’ve used four-space indentation for the fenced block.

1 Like

Yes, that worked! My raw markdown did not have the leading four-space indentation. Thank you!

Is there any easy way to get full GitHub Flavored Markdown support?

I just signed up for Micro.blog, thinking about moving from doing everything manually using GitHub pages, but none of my code snippets render properly. I was expecting micro.blog would take away all the configuration messiness and just work out of the box … GFM being table-stakes for me.

I’ve tried switching to the “Hello” theme.

What elements in your posts are not working that are a part of GFM? Hugo uses Goldmark, which is CommonMark compliant (as is GFM). It may be that you need to add some settings in your configuration to turn on some of the additional features in GFM that are not on by default. See here and here. Notably, Goldmark supports many GFM extensions and even has a GFM property to switch on a few at once.

Forgive my ignorance, but I saw the messages re Hugo above, and searched for a plugin named “Hugo” but there wasn’t one.

I’m a total newbie here - I really expected to be able to start a blog and use it to write posts that included GFM. I’m coming from GitHub pages, Jekyll, running it all locally and then uploading, and I was hoping to avoid all the configuration mess - I was hoping/expecting it would just work.

I tried a simple

```swift
let a = 1
```

it came out unhighlighted in any way in the blog (other than the standard pre-formatted text), using the default plugin, and when I enabled hello

It could well be that my use case is an edge-case. FWIW I’m exploring HashNode for the blog now - it has its own issues re not rendering MarkDown for post abstracts on the home page. I would have preferred Micro.Blog since I’m an avid listener of Core Intuition.

Damian (using a different account, since I deleted the one I was looking to use)

Hugo is like Jekyll and it’s what’s powering Micro.blog.

I am not sure what the stock themes are doing when it comes to syntax highlighting, but for my custom theme, I add the following to my config.json to get my highlight settings setup right with the theme I want to use (Dracula). This may be specific for choosing Hugo 0.91 for your blog-- I’m just not sure.

{
 "markup": {
      "highlight": {
         "anchorLineNos": false,
         "codeFences": true,
         "guessSyntax": true,
         "hl_Lines": "",
         "lineAnchors": "",
         "lineNoStart": 1,
         "lineNos": true,
         "lineNumbersInTable": true,
         "noClasses": true,
         "style": "dracula",
         "tabWidth": 4
      }
   }
}

I don’t know that I would call syntax highlighting an edge case, but language definitions coming for the ride is relatively new for Hugo and Micro.blog is still just upgrading from an old version to one that includes it natively without having to install plug ins or javascript.

1 Like

Definitely make sure you’re using Hugo version 0.91 under the Design screen. Syntax highlighting works much better in 0.91 than the older version we still default to.

If you could post an idiot’s guide to enabling GitHub Flavored Markdown that would be helpful.

I’ve updated to 0.91, and installed the hello plugin but I’m still seeing the default rendering for a simple

```swift
let a = 1
```

I’m guessing there are other config steps. It could also be because my trial has expired (I can still preview new posts though).

Go to Design → Edit Custom Themes → Select your Theme. Then add to Custom Templates a file named config.json.

Add the following:

 "markup": {
      "highlight": {
         "anchorLineNos": false,
         "codeFences": true,
         "guessSyntax": true,
         "hl_Lines": "",
         "lineAnchors": "",
         "lineNoStart": 1,
         "lineNos": true,
         "lineNumbersInTable": true,
         "noClasses": true,
         "style": "dracula",
         "tabWidth": 4
      }
   }
}

Those are my settings. Click Update Template to save. Then review.

To help your own Googling, what you’re referring to is not GitHub Flavored Markdown. It’s syntax highlighting for code blocks with language definitions.

In particular, "codeFences": true and "guessSyntax":true are the settings to use the three back ticks and use Swift as a definition.

1 Like

Thanks Jason, however you’ve made an assumption that I have a theme selected, which I didn’t. I had simply enabled the hello plugin. I’m suggesting Manton creates a true idiot’s guide, with step-by-step instructions for someone that has just signed up, with screenshots.

I clicked Edit Custom Themes and created a new theme with the title aaa with no GitHub template and selected it as my custom theme.

Then I edited the aaa theme but don’t see where to add to Custom Templates a file named config.json. Edit - I’ve subsequently clicked on New Template (which I didn’t realize would create a custom template) and created the config.json with the contents you suggested, but this didn’t change the markdown preview.

I’ve gone back to using GitHub Pages for now. I really don’t want to invest time in grokking Hugo, since I’ve already spent too much time getting my head around Jekyll - the whole point for me was to move to system that just worked.

I appreciate that code fences are just one aspect of GFM, but I don’t want to have to go through more config changes when I want to use another aspect of GFM.

Many thanks for working with me on this - I didn’t expect to have to dive into custom json config files just to enable formatted code.

@manton perhaps create a support page for someone that has literally just signed up, explaining step by step how to enable code fences, and ideally full support for GFM:

  1. Update Hugo to the latest in the design page
  2. Create a custom theme by tapping Edit Custom Themes, name the theme “My Theme”
  3. Select the theme on the Design page
  4. Create a JSON file per Jason’s spec, and place it … somewhere …
  5. Profit.

That config shouldn’t be necessary unless you really need to customize something. I realized when you said “Markdown preview” that the issue must be the difference between our “Preview” feature and the actual published blog post. Unfortunately the preview does not support everything yet… But when you post to your blog, it will look correct. I just tested a Swift example and it looks right to me.

So, I think if we update the preview to match the real output for your blog, that should hopefully help a lot. Also, you can create a test blog to try out the formatting or other changes.

Thanks!