Problems with Hugo and Prism.js

support
1

Hello,

I’m about to migrate a website to Hugo. If possible I would like to keep using Prims.js as a code highlighter. So far this has worked for all posts I made under Hugo (for example https://gist.github.com/Fryboyter/3e98942a865e20ccb12305aaa5d78235).

But now I have an article which causes problems (https://gist.github.com/Fryboyter/a06cd3f8ecb87fb3892affe09fb6715c). Here for example only Fryboyter is shown in line 19. For lines 20 to 22 only empty lines are displayed instead of the code. And so on. The problem here seems to be the div.

If I look at the source code of the page Hugo created, then the complete code I want to highlight is present.

So does anyone have any idea how to display the complete code with Hugo and Prism.js? When I use the highlighter of Hugo everything is displayed, but here long lines of code are not wrapped, so that you have to scroll horizontally or the text overlaps to the right. Therefore I would prefer Prism.js.

hugo env
Hugo Static Site Generator v0.54.0/extended linux/amd64 BuildDate: unknown
GOOS=“linux”
GOARCH=“amd64”
GOVERSION=“go1.11.5”

2

Hi,

It’s really difficult to say what is wrong here. How are you implementing Prism? How are you rendering your content? What other styles are present? I would suggest having a read about Requesting Help and perhaps creating a minimal repo you can share to help us help you.

3

As I don’t normally use a version control system, I hoped the problem could be solved by using the two files.

I uploaded the current version to https://codeberg.org/Fryboyter/hugo .

How are you implementing Prism?

I refer to the CSS file in the file header.html. In the file footer.html I refer to the JS file. I already tried to put everything into the header file. In the article the code will be highlighted as follows:

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">function clrhist() {
awk -i inplace -v rmv="$1" '!index($0,rmv)' "$HISTFILE"
}</code></pre>

How are you rendering your content?

So far I created the page with the command “hugo -D server” or only with “hugo”. In both cases I have the described problem.

What other styles are present?

In addition to prism.css there is the file styles.css which is responsible for the page itself as well as for the comment system Isso.

4

Hi,

The repo you linked to is giving me a 404, sorry. So I tried to implement Prism, this is what I did:

  1. Go to the Prism site, select all languages, default theme, and line numbers.
  2. Put the resulting js and css files in hugosite/static/ as prism.js and prism.css.
  3. Use the following layout at hugosite/layouts/_default/single.html:
<!DOCTYPE html>
<html{{ with .Site.LanguageCode }} lang="{{ . }}"{{ end }}>
<head>
  <link href="/prism.css" rel="stylesheet" />
</head>
  <body>
    {{.Content}}
    <script src="/prism.js"></script>
  </body>
</html>
  1. Use the following content in hugosite/content/posts/prism.md:
---
title: prism
---

lorem 

<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">function clrhist() {
awk -i inplace -v rmv="$1" '!index($0,rmv)' "$HISTFILE"
}</code></pre>

ipsum

Running hugo -D for me results in the following generated file (with some whitespace removed) in hugosite/public/posts/prism/index.html:

<!DOCTYPE html>
<html lang="en-us">
<head>
<link href="/prism.css" rel="stylesheet" />
</head>
<body>
<p>lorem</p>
<pre class="line-numbers language-bash" style="white-space:pre-wrap;">
<code class="language-bash">function clrhist() {
awk -i inplace -v rmv="$1" '!index($0,rmv)' "$HISTFILE"
}</code></pre>
<p>ipsum</p>
<script src="/prism.js"></script>
</body>
</html>

and hugo server -D generates the following at http://localhost:1313/posts/prism/

prism

Do you get different results?

1 Like
6

Hello,

Sorry I didn’t get the chance to test it before today. If I take your example, everything works.

If I exchange the code you have highlighted for the one that is causing me problems, it won’t work again. But I also noticed something. If I call the markdown file directly from Codeberg (https://codeberg.org/Fryboyter/hugo/src/branch/master/content/posts/2017/index-twig-des-fryboyter-themes.md) I get the same incomplete display of the highlighted code. But in this case neither prism.js nor prism.css should be loaded, right? If I’m right (and I didn’t do anything wrong) it should be a markdown problem.

7

You can not use plain HTML code inside <code> because it will be parsed as HTML. You have to encode each < and > Symbol to prevent this. This is not an hugo or prism.js issue.

Look also at https://stackoverflow.com/questions/11386586/how-to-show-div-tag-literally-in-code-pre-tag

8

I would have expected all sorts of reasons causing the problem. But not that one. Sometimes you can’t see the forest for the trees. Now it works. Many thanks for the hint. :slight_smile: