We’ll render an ordinary Markdown file to an HTML web page that makes use of the Bulma CSS framework. We implement this program with a Golang Markdown bundle and a Golang template.
This text will present you easy methods to render a Markdown file to an HTML web page. This HTML web page will use the Bulma CSS framework. To use a few of the particular courses provided by this CSS framework, we’ll want to write down a particular “hook” to adapt the way in which a couple of HTML tags are rendered. For this instance, I’ll persist with adapting the rendering of the h1 and img tags and including determine tags, however this may simply be expanded if wanted.
To see the Markdown file that we’ll be utilizing click here. The Markdown bundle for Golang that we’ll be utilizing is this one. In case you are not very accustomed to Markdown or want a refresher, then this is a good resource.
You’ll find the Bulma CSS framework here. It’s a CSS-only framework, so that you’ll solely want to incorporate a hyperlink to the Bulma CSS model sheet in your HTML file. No JavaScript is required.
You’ll be able to find the complete code here.
Beneath, I’ll focus on the most important() and renderHook() features individually.
The principle() operate
In traces 3–22, you discover the HTML header and footer for the HTML web page we want to render. These are fairly primary, besides that we additionally import the Bulma CSS framework in line 9.
In traces 24–27, we learn the markdown file utilizing ioutil.ReadFile() and we subsequently use panic() to cope with any errors that will happen.
In traces 29–32, we decide the choices we want to ship to the markdown renderer. Right here, I discovered that html.FlagsNone was the very best flag to make use of. In case you don’t put any flag, it is going to be set to html.CommonFlags by default. In my expertise, although, this may increasingly give undesirable outcomes. Not rendering the bullet factors can be one instance.
The second factor to notice right here is that we set RenderNodeHook to the renderHook() operate. This practice operate takes care of rendering the heading and picture nodes. Extra on that later.
In traces 33 and 34, we render the Markdown content material to HTML. The markdown renderer appears to return a []byte slice. Due to this fact I exploit the string() operate to transform this right into a string earlier than feeding the output to the template.
In traces 36–38, we create a easy Golang template that consists of the header, a variable dot between double brackets, and the footer. The correctness of the template is then checked with template.Should().
Utilizing Golang templates might look like overkill for such a tiny utility, but it surely nonetheless regarded like the simplest solution to concatenate three strings in a couple of traces of code. Additionally, in an internet context, you’d most likely use templates anyway.
You will need to be aware right here that we have to use the textual content/template bundle in order that the HTML tags should not escaped.
In traces 40 and 41, we create an output buffer known as processed of sort bytes.Buffer and render the template into it utilizing Execute(). The rationale we render the HTML web page right into a byte buffer is in order that we will ship it to ioutil.WriteFile().
In traces 43–46, we write the output buffer processedto a file known as index.html utilizing ioutil.WriteFile(). We additionally test for any errors, ought to they happen.
The customized renderHook() operate
This operate is of the RenderNodeFunc sort. You’ll be able to examine that here.
When the markdown parser is run, it creates a node tree to symbolize the HTML to be rendered. We will use a customized operate to render nodes if we wish them to be rendered in another way than the default.
In traces 3–15, we course of the heading nodes.
In line 4, we get the extent of the heading node. We’re all for stage 1 as we solely want to adapt the output for the h1 tag, for this instance.
In line 6, we test if the node is a starting node. Because of this the variable getting into must be true. Right here we additionally take a look at if stage equals to 1.
In line 7, we write the output h1tag as we wish it to seem. Verify the Bulma documentation for the which means of the courses. For some other CSS framework, we will do one thing comparable right here.
In traces 8 and 9, we once more take a look at if getting into is true. This time we cope with the opposite heading nodes that aren’t stage 1. Once more we write the output as we wish it. On this case, with no particular courses added to the tag.
In traces 10 and 11, getting into can be false and would thus signify that we’re coping with closing tags. The closing tags are rendered in the identical method for all heading ranges. We write this to the output stream.
In line 14, we return from the operate with two values. The primary worth ast.GoToNext() tells this system to course of the subsequent node within the tree. This generally is a little one node. The second worth is a boolean. On this case, the boolean is true as a result of our customized operate does the rendering of the tags. If the Normal renderer have been the render the tags, the boolean worth can be false.
In traces 16–30, we course of the image nodes. Word that on this instance, we’ll wrap the picture (img) tags in determine tags. This enables us to make use of some particular styling from the Bulma CSS framework.
In line 17, we get the supply src of the picture node.
In traces 19 and 20, we discover the primary little one of the picture node, which accommodates the “alt” textual content. (I found this by trial and error).
In traces 22 and 23, we take a look at to see if we’re getting into the picture node and if the alt textual content is just not an empty string. We then output the determine and img tags as we want them to be; with a couple of courses within the determine tag and in addition with the alt textual content within the imgtag.
In traces 24 and 25, we once more take a look at to see if we’re getting into a picture node however this time the alt textual content must be empty. We output the determine and img tags as we wish them to seem however with out the alt textual content attribute within the imgtag, as it’s clean.
In traces 26 and 27 getting into will probably be false, and we write the ending determine tag. No img tag is required right here.
In line 30, we return from the operate however with completely different values than beforehand. We’ll return ast.SkipChildren as the primary return worth, as the youngsters of the picture node shouldn’t be rendered. This ensures that the alt textual content is just not rendered as paragraph textual content within the HTML web page. The second worth is once more true.
In traces 31 and 32, we cope with all different nodes, i.e., the nodes that don’t symbolize the heading or picture tags. We return from the operate with ast.GoToNext and false. Right here we return false because the second worth because the default renderer must render the tags.
