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
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 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
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
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
In traces 43–46, we write the output buffer
processedto a file known as
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
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
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
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.