New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

yaml syntax highlighting problems when using code fences #186

Closed
hellt opened this Issue Jul 17, 2017 · 22 comments

Comments

Projects
None yet
2 participants
@hellt

hellt commented Jul 17, 2017

Configuration

Actual behavior

yaml syntax is unrecognized when using code fences like:

<triple backtick>yaml
 yaml code
<triple backtick>

Expected behavior

YAML syntax applied

@hellt hellt changed the title from yaml syntax highlighting when using code fences to yaml syntax highlighting problems when using code fences Jul 17, 2017

@kakawait

This comment has been minimized.

Owner

kakawait commented Jul 19, 2017

@hellt I have to check if not an Hugo issue directly. Because theme does not handle directly code fences syntax

@kakawait kakawait added this to the 0.4.0-BETA milestone Aug 30, 2017

@kakawait kakawait self-assigned this Aug 30, 2017

@kakawait kakawait modified the milestones: 0.4.2-BETA, 0.4.3-BETA Nov 1, 2017

@kakawait kakawait modified the milestones: 0.4.3-BETA, 0.4.4-BETA Nov 12, 2017

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 23, 2017

@hellt Is not really an issue since default Highligth.js package do not cover yaml syntax, as you can see on download page https://highlightjs.org/download/

You must add yaml.js Highligth.js add-on, to do that you can simply add following configuration inside your config.toml

[[params.customJS]]
    src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js"
    integrity = "sha256-tvm0lHsuUZcOfj/0C9xJTU4OQx5KpUgxUcAXLX5kvwA="
    crossorigin = "anonymous"
    async = true
    defer = true
@hellt

This comment has been minimized.

hellt commented Nov 23, 2017

Thanks, will check this today-tomorrow

@hellt

This comment has been minimized.

hellt commented Nov 23, 2017

a tiny question, how did you find the js for yaml lang?

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 23, 2017

@hellt

This comment has been minimized.

hellt commented Nov 24, 2017

@kakawait do you know if it is possible to add the same way custom hljs theme?
I tried:

  [[params.customCSS]]
      src = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/vs.min.css"
      integrity = "sha256-w6kCMnFvhY2tI1OnsYR/rb5DG9yFGodJknvFZOkp51E="
      crossorigin = "anonymous"
      async = true
      defer = true

But seems like the builtin styles are overriding. Should I build it as explained here https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#change-code-coloration-highlightjs-theme?

@hellt

This comment has been minimized.

hellt commented Nov 24, 2017

I added kinda end-2-end instruction for this adjustments - https://netdevops.me/2017/how-to-add-yaml-highlight-in-highlight.js/
Would like to see a more simplified, or automated way to add custom HLjs themes to Tranquilpeak.

Thanks, this issue can be closed

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 24, 2017

@hellt Yes I will think about to externalize HL theme to be more easy to change it

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 26, 2017

@hellt I will close that issue and open a new one for easy customization HLjs theme

@hellt

This comment has been minimized.

hellt commented Nov 27, 2017

while this is somehow related to that issue, can you please shed some light why in Chrome, YAML code blocks are not properly rendered, while it is ok in latest stable firefox and IE? (src page)

What I see, is the YAML fenced codeblock has different CSS class properties:
image

The same code block in firefox:
image

As you see, no codeblock and hljs classes are applied, and code block content has not been parsed to different elements

At the same time, using a local hugo server in the same Chrome browser all is good
image

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 27, 2017

I will check that.

@kakawait kakawait reopened this Nov 27, 2017

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 27, 2017

@hellt I confirm the bug... It's really strange that is working on FF and not Chrome. I will update you asap when I get something

@kakawait kakawait added the bug label Nov 27, 2017

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 27, 2017

@hellt Could you share with me your .md file of that blog post? https://netdevops.me/2017/how-to-add-yaml-highlight-in-highlight.js/

@hellt

This comment has been minimized.

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 27, 2017

Thank you, now I have to find a way to reproduce locally lol :)

@hellt In parallel could you please try to tweak following parameters:

async = true
defer = true

Try with both to false, if it works you can try with 1 false and 1 other true.

I suspect that async and/or defer attributes will cause that DOM will be successfuly loaded before script will be apply that why highlighting does not work since JS for yaml support is not 100% loaded.

@hellt

This comment has been minimized.

hellt commented Nov 29, 2017

tried with both async and defer set to false, no effect. Currently my blog is configured with false for both these params so you can check it out yourself if there is something interesting

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 29, 2017

Ok thank you, sorry for that issue. I will try to find what's happen.

The fact is working on local is really strange. That why I suspected loading order issue.

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 29, 2017

@hellt issue comes from async="false" I suspect that Chrome still async even if equals to false because I'm not sure that async attr allows value. I mean is <script async src="..."> common usage without value.

I have to fix it

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 29, 2017

As workaround you can use older (deprecated) syntax describe here https://github.com/kakawait/hugo-tranquilpeak-theme/blob/master/docs/user.md#customization

[params]
  customJS = ["https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/languages/yaml.min.js"]
@hellt

This comment has been minimized.

hellt commented Nov 30, 2017

@kakawait

This comment has been minimized.

Owner

kakawait commented Nov 30, 2017

Is something that i can fix. It will be plan for next release 0.4.4-BETA but you could try work around before that futur release

@hellt

This comment has been minimized.

hellt commented Nov 30, 2017

Thanks, this worked for Chrome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment