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")
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.
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.
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.
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.
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:
Edit Custom Themes, name the theme āMy Themeā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!