Look into Pandoc `--highlight-style`

[badlydrawnrob]

• [ ] Include verbatim main.css file contents in <header> using Yaml? (interesting but not relevant essay post)
• [ ] Include a .json file to change the <header> CSS highlight styles
• [ ] Simply include a <link ...> file to main.css and just override highlight styles there (e.g: edit HTML template file and hardcode CSS file there)

You can find the basic documentation here ... though I've forgotten how the bloody html templates and flags work in the npm command for Pandoc rendering the template in terminal. I think it's wise to use Pandoc templates frugally as, to me, the documentation is as clear as mud and likely to change.

See a better overview in the Stackoverflow thread (seems more thorough than the official docs) and this is also a good guide for the .json files that Pandoc uses — and this Stackoverflow conversation is a good reference for printing out the default html template, and css files that Pandoc uses (this link is ok for the basic html and css template, but I think the $highlighting-css$ is dynamically created through the .json file. Yeah, it's getting confusing (and this bug isn't helping either)

Outputs a .json file, which I think you could replace with --css-variables at least to create a light and dark theme. The core Skylighting css file might be better suited to live in print-first-css, only extending it in Anki themes if absolutely necessary.

It'd then be a simple case of changing the values for --css-variables in a simple colours.less file!!!

Also see this comment about Skylighting's downsides.

{
    "text-color": null,
    "background-color": null,
    "line-number-color": "#aaaaaa",
    "line-number-background-color": null,
    "text-styles": {
        "Alert": {
            "text-color": "#ff0000",
            "background-color": null,
            "bold": true,
            "italic": false,
            "underline": false
        },
        "Annotation": {
            "text-color": "#60a0b0",
            "background-color": null,
            "bold": true,
            "italic": true,
            "underline": false
        },
        "Attribute": {
            "text-color": "#7d9029",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "BaseN": {
            "text-color": "#40a070",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "BuiltIn": {
            "text-color": "#008000",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Char": {
            "text-color": "#4070a0",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Comment": {
            "text-color": "#60a0b0",
            "background-color": null,
            "bold": false,
            "italic": true,
            "underline": false
        },
        "CommentVar": {
            "text-color": "#60a0b0",
            "background-color": null,
            "bold": true,
            "italic": true,
            "underline": false
        },
        "Constant": {
            "text-color": "#880000",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "ControlFlow": {
            "text-color": "#007020",
            "background-color": null,
            "bold": true,
            "italic": false,
            "underline": false
        },
        "DataType": {
            "text-color": "#902000",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "DecVal": {
            "text-color": "#40a070",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Documentation": {
            "text-color": "#ba2121",
            "background-color": null,
            "bold": false,
            "italic": true,
            "underline": false
        },
        "Error": {
            "text-color": "#ff0000",
            "background-color": null,
            "bold": true,
            "italic": false,
            "underline": false
        },
        "Extension": {
            "text-color": null,
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Float": {
            "text-color": "#40a070",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Function": {
            "text-color": "#06287e",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Import": {
            "text-color": "#008000",
            "background-color": null,
            "bold": true,
            "italic": false,
            "underline": false
        },
        "Information": {
            "text-color": "#60a0b0",
            "background-color": null,
            "bold": true,
            "italic": true,
            "underline": false
        },
        "Keyword": {
            "text-color": "#007020",
            "background-color": null,
            "bold": true,
            "italic": false,
            "underline": false
        },
        "Operator": {
            "text-color": "#666666",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Other": {
            "text-color": "#007020",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Preprocessor": {
            "text-color": "#bc7a00",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "SpecialChar": {
            "text-color": "#4070a0",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "SpecialString": {
            "text-color": "#bb6688",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "String": {
            "text-color": "#4070a0",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Variable": {
            "text-color": "#19177c",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "VerbatimString": {
            "text-color": "#4070a0",
            "background-color": null,
            "bold": false,
            "italic": false,
            "underline": false
        },
        "Warning": {
            "text-color": "#60a0b0",
            "background-color": null,
            "bold": true,
            "italic": true,
            "underline": false
        }
    }
}