Wrong Syntax Highlight applied

[FirstVertex]

Hi y'all. Great lib and I'm loving it. Thanks for your work.

I have a small problem with some Syntax Highlighting not rendering text properly.

Here's a picture of what is rendered:

See how the text inside the code is rendered all different colors? And I would expect the H1 tag itself to not be white, similar to the Div.

Here's the SCSS and the comment that's generating this:

/* SG
# Content/Header

Creates a reversed section in a dark shade of the primary color

This is the header

Some text in the header

*/
.dyna-header {
  text-align: center;
  padding: 20px;
  font-weight: 100;
  h1 {
    font-weight: 100;
    margin: 0 0 0.2em;
  }
}

Here is the contents of my .styleguide file. I have doctored it to use relative paths that reference a project above the doc project's root. Also to reference my local highlight.js and vs theme.

{
    "sgComment": "SG",
    "srcFolder": "..\\framework\\framework\\styles",
    "outputFile": ".\\src\\generated\\styleguide\\styleguide.html",
    "templateFile": ".\\node_modules\\markdown-styleguide-generator\\template\\template.html",
    "themeFile": ".\\node_modules\\markdown-styleguide-generator\\template\\theme.css",
    "highlightFolder": ".\\node_modules\\highlight.js\\styles",
    "highlightStyle": "vs",
    "excludeDirs": [
        "target",
        "node_modules"
    ],
    "fileExtensions": {
        "scss": true,
        "sass": false,
        "css": false,
        "less": false
    },
    "walkerOptions": {
        "followLinks": false
    },
    "jqFile": ".\\node_modules\\markdown-styleguide-generator\\template\\jquery.js"
}

Here's the relevant lines from my package.json

  "dependencies": {
    "highlight.js": "^8.9.1",
    "markdown-styleguide-generator": "^2.0.4"
  }

Appreciate any help you could provide! 🍺

[richpauly13]

It doesn't look like this code is maintained, but I had the same problem.

Copy and paste this code at the top of your theme file: .styleguide pre { color: #000080; }

Essentially it colors everything in the pre tag blue, then lets highlight color the attributes and classes. It is a bit hacky, but works.