Proposal: Add highlighting support for Go/Hugo templates to Discourse

Meta
,
1

I developed highlight.js grammars and Discourse plugins for Go and Hugo templates.

Should be easy to integrate and result in better display of Hugo templates in Discourse.

Even without utilizing the advanced stylings you will get an emediate effect of proper highlighting the standard template stuff.

Features

highlightjs-hugo
highlightjs-hugo1258×262 38.8 KB

Highlight.js Grammars

  • Support for:

  • Hugo and Go templates

  • Html and Text templates

  • Full coverage of:

    • Template keywords
    • Built-in functions
    • Aliases

  • Improved automatic language detection

  • Advanced highlighting scopes

  • Prebuilt **browser bundle** for immediate use

Discourse Integration

  • Theme components built on the provided grammars
  • Enables proper syntax highlighting in Discourse environments

Documentation and Repository

2

When i try to install this in the Theme components tab, I get this error:

image
image2052×586 38.1 KB

3

mmh, maybe a shortage on the install docs…

please verify you select the language-grammars zip not the full highlightjs-hugo-discourse.zip

just replayed that on my test instanace and it works fine.

4

Yea, right. Testing:

{{ with resources.Get "css/main.css" | css.Build }}
  {{ if hugo.IsDevelopment }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ else }}
    {{ with . | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{ end }}
  {{ end }}
{{ end }}
5

Maybe I’m missing something, but I have activated this on both Hugo dark and Hugo light, but I don’t see any difference when I toggle this on/off.

6

I would say you used a fenced code block with ```html resulting in a fixed class using highlight.js XML language
<code class="lang-html hljs language-xml"

you want either no class for autodetection or hugo-html :slight_smile:

  • fixed hugo-html results in <code class="lang-hugo-html hljs language-hugo-html">
  • autodetect results in <class="hljs language-hugo-html">

with class: ```hugo-html

{{ with resources.Get "css/main.css" | css.Build }}
  {{ if hugo.IsDevelopment }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ else }}
    {{ with . | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{ end }}
  {{ end }}
{{ end }}

autodetect (just ```)

{{ with resources.Get "css/main.css" | css.Build }}
  {{ if hugo.IsDevelopment }}
    <link rel="stylesheet" href="{{ .RelPermalink }}">
  {{ else }}
    {{ with . | fingerprint }}
      <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous">
    {{ end }}
  {{ end }}
{{ end }}

importing hugo-text would allow to use ```hugo-text which would only highlight the hugo actions leaving the html unstyled.

7

Just for Info:

while checking how it’s going with the highlight I found that sometimes blocks are not highlighted at all…and not only with my grammar thought about timing linits, … but it was a hard CAP by code block size.

and here is a PR that should solve the problem

  • Still a hard limit on 30000 bytes
  • raise the autodetect limit to 2K
  • if it’s longer, use the first 2000 bytes to try autodetect

and live: How to capture/generate revisions of page? - #2 by Welsh