@blank-utils/syntax-highlighter
Version:
CSS font-palette syntax highlighter component
54 lines (53 loc) • 1.96 kB
JavaScript
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const SyntaxHighlighter = ({ children, className = "", palette = {} }) => {
// Default colors (VS Code dark theme)
const defaultPalette = {
keywords: "#4EC9B0",
comments: "#6A9955",
literals: "#CE9178",
numbers: "#B5CEA8",
functions: "#DCDCAA",
others: "#C586C0",
unused: "#000000",
quotes: "#9CDCFE",
additional: "#569CD6",
};
const colors = { ...defaultPalette, ...palette };
const fontPaletteCSS = `
@font-face {
font-family: "Syntax Highlighter";
src: url("https://cdn.jsdelivr.net/npm/@blank-utils/syntax-highlighter@0.2.0/fonts/syntax-highliter.woff2") format("woff2");
font-display: swap;
}
@font-palette-values --syntaxPalette {
font-family: "Syntax Highlighter";
override-colors:
0 ${colors.keywords}, /* keywords, {} */
1 ${colors.comments}, /* comments */
2 ${colors.literals}, /* literals */
3 ${colors.numbers}, /* numbers */
4 ${colors.functions}, /* functions, [] */
5 ${colors.others}, /* js others */
6 ${colors.unused}, /* not in use */
7 ${colors.quotes}, /* inside quotes, css properties */
8 ${colors.additional} /* few chars */
;
}
`;
const containerStyle = {
fontFamily: '"Syntax Highlighter", "Fira Code", "Consolas", monospace',
fontPalette: "--syntaxPalette",
background: "#1e1e1e",
color: "#d4d4d4",
padding: "1rem",
borderRadius: "0.5rem",
overflowX: "auto",
lineHeight: 1.5,
};
const codeStyle = {
margin: 0,
whiteSpace: "pre-wrap",
};
return (_jsxs(_Fragment, { children: [_jsx("style", { children: fontPaletteCSS }), _jsx("div", { style: containerStyle, className: className, children: _jsx("pre", { style: codeStyle, children: children }) })] }));
};
export default SyntaxHighlighter;