Ability to convert data to its final rendered result, without needing intermediate markdown

support
1

So I’ve been learning a lot about hugo and how to do stuff, and as my earlier posts have stated, I am trying to generate pages based on json. With all the help so farr I am making great progress, but yesterday I bumped into the next challenge to which I don’t know the answer (or whether its even possible to begin with). Note that everything I am doing here, is through templates.

Important edit: I initially hypothesized using .Inner in a partial might be better, but it turns out to be impossible, so I removed it from this post. Apologies for implying something is possible that isn’t.

Is it possible to use the rendering engine of hugo on bits of text without having to create markdown for it? To clarify:

One of the elements in my json file contains a string of text that I would like to present as a code block. The way I implemented it now is as followed:

    {{ if .docString}}
        <div class="docString">
        {{ delimit (slice "```" .docString.mediaType  "\n" .docString.content "\n```") "" | markdownify }}
        </div>
    {{end}}

Which is very ugly, but gets the job done. since I am working within templates, I can’t just do this:

    {{ if .docString}}
        <div class="docString">
        ```{{docString.mediaType}}
        .docString.content
        ```
        </div>
    {{end}}

Because text in templates isn’t considered markdown. Preferably I want to bypass having to use markdown entirely and just go straight to the logic that generates the result and feed whatever it needs directly into it, something like:

{{partial "codeblock" .docString.mediaType .docString.content}}

At it’s core, I’m trying to avoid having to reinvent the wheel. Some very smart folks already built a way to present some text as a codeblock, so I just want to use whatever they have built. Not just because its less code to maintain, but also because that way I know whatever I am generating will be properly understood by the template I am using.

2

If you want text rendered as code, use the appropriate HTML elements pre and code. It’s not different from rendering text as a header or as anything else.

3

Is it? I’m still figuring out what is done by hugo and what is done by my template, but for example: I can mark a specific codeblock as json, which results in a specific kind of highlighting of the text that I am capturing in the code block. This is represented in the generated HTML with some tags, and with very specific span elements:

<code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">[</span>
</span></span><span class="line"><span class="cl"><span class="p">{</span><span class="nt">"keyToCheck"</span><span class="p">:</span> ... etc

So yes I could use <code>, but that would remove my ability to apply syntax highlighting, because that is actually done by the renderer (I guess?) by using a lot of span elements to assign specific colors to specific parts of the text - as demonstrated.

This is exactly why I just want to reuse the existing logic that renders “standard” stuff. Because often, it isn’t just default HTML that is being generated by that logic.

4

There is no standard in rendering text code to html. That all depends on the layouts html, the highlighting engine, the css…

Hugo provides the highlight function to render some input to a highlighted code block in HTML.

1 Like