Rename the variables (in print-first-css)

[badlydrawnrob]

Pandoc Skylighting theme

1. How should our variables be named in the future?
2. How similar are these naming conventions to other highlighting tools?[^1]
3. Should I find a more specific highlight style?

To get closer to Skylighting json file:

• [x] #67

Print first CSS styles

The Pandoc json file

{
    "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
        }
    }
}

[^1]: Unfortunately, very. See this comment for Pygments .classes and other highlighter plugins. If ever I needed to switch out the highlighter for a different one, it's going to take a fair amount of work to migrate the code.

[badlydrawnrob]

Pygments

1. Some highlighter styles are more specific (if ... then ... else)
2. Some lump styles in together (if same colour as True)

CSS classes

11ty and Prism

Highlight.js

[badlydrawnrob]

I think the way I have things right now with a "colour palette" and then the Skylighting-specific values is the best I can hope for. If we eventually move to a different highlighter, I'd just have to replace those .classes anyway.