Adding JSON file with readfile and highlight in a list doesn't render correctly

support
1

I’m stuck trying to get readfile and highlight to add JSON files to a page in an indented list item.

I’ve got a shortcode for adding text to a page from a data file:

{{/* readfile.html */}}
{{- $file := .Get "file" -}}
{{- if fileExists $file -}}
  {{- highlight ($file | readFile) (.Get "highlight") "" -}}
{{- else -}}
  {{- errorf "readfile did not find %q in %s" $file .Position -}}
{{- end -}}

Then add the JSON directly or with the shortcode:

1. original

    ```json
    {
      "name": "a simple job to perform one action",
      "description": "a bunch of words"
    }
    ```

1. readfile

    {{< readfile file="test.json" highlight="json" >}}

If I add the JSON directly to the Markdown, it renders correctly. But if I add the same JSON with this shortcode, it comes out indented.

<ol>
<li>
<p>original</p>
<div class="highlight"><pre tabindex="0" style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
</span></span><span style="display:flex;"><span>  <span style="color:#062873;font-weight:bold">&#34;name&#34;</span>: <span style="color:#4070a0">&#34;a simple job to perform one action&#34;</span>,
</span></span><span style="display:flex;"><span>  <span style="color:#062873;font-weight:bold">&#34;description&#34;</span>: <span style="color:#4070a0">&#34;a bunch of words&#34;</span>
</span></span><span style="display:flex;"><span>}
</span></span></code></pre></div></li>
<li>
<p>readfile</p>
<div class="highlight"><pre tabindex="0" style="background-color:#f0f0f0;-moz-tab-size:4;-o-tab-size:4;tab-size:4;"><code class="language-json" data-lang="json"><span style="display:flex;"><span>{
    </span></span><span style="display:flex;"><span>  <span style="color:#062873;font-weight:bold">&#34;name&#34;</span>: <span style="color:#4070a0">&#34;a simple job to perform one action&#34;</span>,
    </span></span><span style="display:flex;"><span>  <span style="color:#062873;font-weight:bold">&#34;description&#34;</span>: <span style="color:#4070a0">&#34;a bunch of words&#34;</span>
    </span></span><span style="display:flex;"><span>}</span></span></code></pre></div>
</li>
</ol>

And it looks something like this on the rendered page:

1. original

   {
     "name": "a simple job to perform one action",
     "description": "a bunch of words"
   }


2. readfile

    {

      "name": "a simple job to perform one action",

      "description": "a bunch of words"

    }

It’s adding 4 extra spaces before the </span> tag due to the indentation of the ordered list item.

I tried assigning the HTML of the highlighted JSON to a variable, slicing into an array, and then using replaceRE or string.TrimLeft to remove the spaces, but it looks like the extra spaces are added when the HTML is added to the page and not by the highlight function. I also made a very hacky attempt of wrapping the JSON text in markdown backticks and using markdownify.

2

You can use the {{% %}} notation.

1. readfile

   {{% readfile file="test.json" highlight="json" %}}

And in your site config:

[markup.goldmark.renderer]
unsafe = true
3

Nope. It’s still rendering the same way.

I did come up with another hacky way that works.

I update the shortcode to add a plain="true" option:

{{- $file := .Get "file" -}}
{{- if fileExists $file -}}
  {{- if  (.Get "highlight") -}}
    {{- highlight ($file | readFile) (.Get "highlight") "" -}}
  {{- else if eq (.Get "plain") "true" -}}
    {{- $file | readFile | safeHTML -}}
  {{- end -}}
{{- else -}}
  {{- errorf "readfile did not find %q in %s" $file .Position -}}
{{- end -}}

And then wrap it in the highlight shortcode in the markdown page:

1. readfile

    {{< highlight json >}}
    {{< readfile file="test.json" plain="true" >}}
    {{< /highlight >}}
4

Works for me. Try it.

git clone --single-branch -b hugo-forum-topic-50789 https://github.com/jmooring/hugo-testing hugo-forum-topic-50789
cd hugo-forum-topic-50789
hugo server
5

Oh that’s interesting. I see what I’m doing.

I’m used to indenting additional paragraphs of an ordered list item by four spaces instead of three. This works, but not when adding text with readfile.

1. this works

   {{% readfile file="test.json" highlight="json" %}}

1. this doesn't work

    {{% readfile file="test.json" highlight="json" %}}
6

I don’t see the difference between the working and the other variant.

7

Look carefully.

1 Like
8

I must admit that I always factor out indentation, as I’m not a Python person (and happily forgot all about FORTRAN).

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.