Css files aren't completely clear for extending

[badlydrawnrob]

Pandoc skylighting has some different styles available

Currently have in the source/style/ folder:

1. modules -> variables -> colors to set up base text and theme colours
2. modules -> variables -> typography which is currently empty
3. partials -> ... which hold dark, light, and skylighting files.
4. Updating Print First CSS is a problem also ... you need to force an update with npm update print-first-css

This is a good guide to how Pandoc uses .json files to style code highlighting

You can also generate a .json file with pandoc --print-highlight-style pygments > my.theme, and use it with pandoc --highlight-style my.theme but I think it's easier simply using the css classes, as I'm doing in skylighting.less.

Currently the npm run styleguide command is "styleguide": "pandoc --template=./source/pandoc/template.html -c ../style/print-first-markdown.css ./source/markdown/partials/*md ./source/markdown/partials/00-metadata.yaml -s -o ./build/markdown/partials.html"

Also see this similar issue in Print First CSS

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

[badlydrawnrob]

Also better to have a more solid process of how users can extend the theme files:

1. Clone Anki themes
2. Create their own repo
3. Copy relevant files
4. Change the package.json?
5. Run npm run ... or npm install etc

Note: One article says Pandoc's Skylighting code highlighter isn't good enough. Yeah, but it's easier to use for our purposes.

[badlydrawnrob]

Keep this absolutely simple. Tell people that they'll have to either override the --css-variables or create their own admin file so it doesn't get overriden.