Is it possible to render links in a highlighted json string?

support
1

I’m trying to convert a site to HUGO that is rendered to look like a highlighted JSON document but am having issues with getting links to work and not sure if it even is.

The original page is https://reaperworld.com/ but was rendered mostly by hand and I obviously don’t want to do that again.

My home template

{{ define “main” }}
{{ $json := .Site.Data.bio | jsonify (dict “indent” "  " “noHTMLEscape” “true”) | safe.JSStr }}
{{ transform.Highlight $json “json” }}
{{ end }}

The data file looks something like

{
  "contact": {
    "email": "<a href=\"mailto:grim@reaperworld.com\">grim@reaperworld.com</a>"
  }
}

And the resulting page ends up like this.
image

Looking at the resulting page there are 2 problems I’m not sure how to fix or if it’s even able to be fixed. The first is that the quotes in the JSON are all being turned into entities, including the ones that are escaped in the JSON string attributes.

But then the highlighter also replaces < and > with entities which then just makes things more complicated.

Here’s the email line from the source after | jsonify

      &#34;email&#34;: &#34;&lt;a href=\&#34;mailto:grim@reaperworld.com\&#34;&gt;grim@reaperworld.com&lt;/a&gt;&#34;,

And the email line after highlighting.

</span></span><span style="display:flex;"><span>      <span style="color:#f92672">&#34;email&#34;</span>: <span style="color:#e6db74">&#34;&lt;a href=\&#34;mailto:grim@reaperworld.com\&#34;&gt;grim@reaperworld.com&lt;/a&gt;&#34;</span>,

Any help would be appreciated.

2

I don’t understand the problem. This rendered page looks fine to me:

image
image644×107 5.23 KB

3

I want the link to be rendered as a link and able to be clicked.

4

Inside of a code sample???

5

The site is supposed to be styled like a code sample yes. Did you not look at the original site that I’m trying to port?

6

I looked at, but I guess I didn’t understand it.

7

Okay, let me be more clear, the values in the comment “object” should be clickable so people can contact me…

original site where links can be interacted with
original site where links can be interacted with353×181 10.5 KB

Apparently i have to do separate posts for embedded images…

8

Here’s the hugo version of the site where links are rendered as raw text that I am trying to get rendered as actual links, which is why the title of this post asks if this is even possible.

image
image982×188 82.2 KB

9

The only thing I’m coming up with is substitution. This works:

data/bio.json

{
  "contact": {
    "email": "EMAIL",
    "phone": "PHONE"
  }
}

template:

{{ $email := `<a href="mailto:grim@reaperworld.com">grim@reaperworld.com</a>` }}
{{ $phone := `<a href="tel:+1234567890">+1 (234) 567-890</a>` }}

{{ $json := .Site.Data.bio | jsonify (dict "indent" "  ") }}
{{ $t := transform.Highlight $json "json" (dict "style" "manni") }}
{{ $t = $t | strings.ReplaceRE `EMAIL` $email }}
{{ $t = $t | strings.ReplaceRE `PHONE` $phone }}
{{ $t | safeHTML }}

rendered:

image
image319×126 5.86 KB

10

So then I’d have to duplicate everything between the json and the template. It seems like it’d be easier to just use site parameters or something with tokens to be replaced.

Wait, with the string replace, I could just replace shouldn’t we just be able to replace &lt; with < and so on?

11

That was my first thought, but there’s an old saying about using regex to solve a problem: “Now you have two problems.” I chose to keep it simple

12

I’m fine with regex. And there’s also DRY, don’t repeat yourself…

13

Or have two data files: one to render+search+replace, the other for the data.

14

Or just use Regex..

Template that fixed the issue.

{{ define "main" }}
  {{ $json := .Site.Data.bio | jsonify (dict "indent" "  " "noHTMLEscape" "true") }}
  {{ $content := transform.Highlight $json "json" }}
  {{ $content = $content | strings.ReplaceRE `&lt;` `<` }}
  {{ $content = $content | strings.ReplaceRE `&gt;` `>` }}
  {{ $content = $content | strings.ReplaceRE `&#34;` `"` }}
  {{ $content = $content | strings.ReplaceRE `\\"` `"` }}
  {{ $content | safeHTML }}
{{ end }}
15

Glad I could help.