adding custom color themes

[jonathanpv]

found some issues trying to add custom color themes that rely on my own variables

i suck at contributing to other repos atm but would be great to understand the flavor of the color object should be of prismjs

react-syntax-highlighter supports both hljs and prismjs as style objects and they differ so it can cause some confusion like it did to me

heres a valid way to add a style object

export default {
    "pre[class*=\"language-\"]": {
        "display": "block",
        "overflowX": "auto",
        "padding": "0.5em",
        "color": "hsl(var(--foreground))",
        "background": "hsl(var(--background))"
    },
    "code[class*=\"language-\"]": {
        "display": "block",
        "overflowX": "auto",
        "padding": "0.5em",
        "color": "hsl(var(--foreground))",
        "background": "hsl(var(--background))"
    },
    "comment": {
        "color": "hsl(var(--muted-foreground))",
        "fontStyle": "italic"
    },
    "quote": {
        "color": "hsl(var(--muted-foreground))",
        "fontStyle": "italic"
    },
    "keyword": {
        "color": "hsl(var(--syntax-keyword))"
    },
    "selector-tag": {
        "color": "hsl(var(--syntax-keyword))"
    },
    "literal": {
        "color": "hsl(var(--syntax-keyword))"
    },
    "subst": {
        "color": "hsl(var(--syntax-keyword))"
    },
    "number": {
        "color": "hsl(var(--syntax-number))"
    },
    "string": {
        "color": "hsl(var(--primary))"
    },
    "doctag": {
        "color": "hsl(var(--primary))"
    },
    "selector-id": {
        "color": "hsl(var(--syntax-function))"
    },
    "selector-class": {
        "color": "hsl(var(--syntax-function))"
    },
    "section": {
        "color": "hsl(var(--syntax-function))"
    },
    "type": {
        "color": "hsl(var(--syntax-function))"
    },
    "params": {
        "color": "hsl(var(--accent-foreground))"
    },
    "title": {
        "color": "hsl(var(--syntax-operator))",
        "fontWeight": "bold"
    },
    "tag": {
        "color": "hsl(var(--syntax-punctuation))",
        "fontWeight": "normal"
    },
    "name": {
        "color": "hsl(var(--syntax-punctuation))",
        "fontWeight": "normal"
    },
    "attribute": {
        "color": "hsl(var(--syntax-punctuation))",
        "fontWeight": "normal"
    },
    "variable": {
        "color": "hsl(var(--secondary-foreground))"
    },
    "template-variable": {
        "color": "hsl(var(--secondary-foreground))"
    },
    "regexp": {
        "color": "hsl(var(--primary-foreground))"
    },
    "link": {
        "color": "hsl(var(--primary-foreground))"
    },
    "symbol": {
        "color": "hsl(var(--syntax-function))"
    },
    "bullet": {
        "color": "hsl(var(--syntax-function))"
    },
    "built_in": {
        "color": "hsl(var(--syntax-operator))"
    },
    "builtin-name": {
        "color": "hsl(var(--syntax-operator))"
    },
    "meta": {
        "color": "hsl(var(--muted-foreground))",
        "fontWeight": "bold"
    },
    "deletion": {
        "background": "hsl(var(--destructive) / 0.2)"
    },
    "addition": {
        "background": "hsl(var(--primary) / 0.2)"
    },
    "emphasis": {
        "fontStyle": "italic"
    },
    "strong": {
        "fontWeight": "bold"
    }
}

which is different when compared to hljs

https://github.com/react-syntax-highlighter/react-syntax-highlighter/tree/842b45ba9328cc232cf6d085e2e6db97291b797d/src/styles/hljs

if you dont have the right format then react-syntax-highlighter ends up not working well and doesnt surface the custom colors (it doesnt even show that its a different token type in the span 😭 it just raw puts the style in an inline string

just putting this here incase anyone else runs into trouble

would love to have a discussion tab btw :)

[jonathanpv]

i believe the root cause of this is that ur package uses prism js for the code block

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

flowtoken/src/components/DefaultCode.tsx

Line 3 in a966002

import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';

heres what the docs say, as u can see theres two things it supports prismjs and hljs
from: https://github.com/react-syntax-highlighter/react-syntax-highlighter

style - style object required from styles/hljs or styles/prism directory depending on whether or not you are importing from react-syntax-highlighter or react-syntax-highlighter/prism directory [here for hljs](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_HLJS.MD). and [here for prism](https://github.com/react-syntax-highlighter/react-syntax-highlighter/blob/master/AVAILABLE_STYLES_PRISM.MD). import { style } from 'react-syntax-highlighter/dist/esm/styles/{hljs|prism}' . Will use default if style is not included.

it would also be cool to support users having their own code block and maybe using components from

https://prompt-kit.com !