the repository which powers this website
frontend highlighting
| -rw-r--r-- | filters/syntax-highlight-hljs.sh | 25 | ||||
| -rwxr-xr-x | filters/syntax-highlighting-shiki.sh | 32 | ||||
| -rw-r--r-- | icons/theme.json | 258 | ||||
| -rw-r--r-- | themed/themed.in.css | 3 | ||||
| -rw-r--r-- | ui-tree.c | 4 |
5 files changed, 319 insertions, 3 deletions
diff --git a/filters/syntax-highlight-hljs.sh b/filters/syntax-highlight-hljs.sh new file mode 100644 index 00000000..3f8c84d2 --- /dev/null +++ b/filters/syntax-highlight-hljs.sh @@ -0,0 +1,25 @@ +BASENAME="$1" +EXTENSION="${BASENAME##*.}" + +[ "${BASENAME}" = "${EXTENSION}" ] && EXTENSION=txt +[ -z "${EXTENSION}" ] && EXTENSION=txt + +# map Makefile and Makefile.* to .mk +[ "${BASENAME%%.*}" = "Makefile" ] && EXTENSION=mk + + +cat << EOF +<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css"> +<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script> + +<!-- and it's easy to individually load additional languages --> +<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/languages/go.min.js"></script> +<pre><code class="language-$EXTENSION"> +EOF + +cat + +cat << EOF +</code></pre> +<script>hljs.highlightAll();</script> +EOF
\ No newline at end of file diff --git a/filters/syntax-highlighting-shiki.sh b/filters/syntax-highlighting-shiki.sh new file mode 100755 index 00000000..2f2a281d --- /dev/null +++ b/filters/syntax-highlighting-shiki.sh @@ -0,0 +1,32 @@ +#!/bin/bash +BASENAME="$1" +EXTENSION="${BASENAME##*.}" + +[ "${BASENAME}" = "${EXTENSION}" ] && EXTENSION=txt +[ -z "${EXTENSION}" ] && EXTENSION=txt + +# map Makefile and Makefile.* to .mk +[ "${BASENAME%%.*}" = "Makefile" ] && EXTENSION=mk + +echo -n '<div id="code-block"><pre style="background-color: #1f2430; color: #cccac2"><code id="contents">' + +sed 's/&/\&/g; s/</\</g; s/>/\>/g; s/"/\"/g; s/'"'"'/\'/g' + +cat << EOF +</code></pre></div><script type="module"> +import { createHighlighter } from 'https://esm.sh/[email protected]'; +const t = Object.freeze((await fetch("/icons/theme.json")).json()); +const highlighter = await createHighlighter({ themes: [], langs: ["$EXTENSION"] }); +await highlighter.loadTheme(t); +const o = document.getElementById('code-block'); +const i = document.getElementById('contents'); +o.innerHTML = (await highlighter.codeToHtml(i.innerText, { + lang: "$EXTENSION", + theme: 'ayu-mirage' +})).replaceAll( + "font-style:italic", + "font-family:'Cascadia Code NF Italic', 'Cascadia Code', italic", +); +</script> + +EOF diff --git a/icons/theme.json b/icons/theme.json new file mode 100644 index 00000000..3443faf4 --- /dev/null +++ b/icons/theme.json @@ -0,0 +1,258 @@ +{ + "colors": {}, + "displayName": "Ayu Mirage", + "name": "ayu-mirage", + "tokenColors": [ + { "settings": { "background": "#1f2430", "foreground": "#cccac2" } }, + { + "scope": ["comment"], + "settings": { "fontStyle": "italic", "foreground": "#6e7c8f" } + }, + { + "scope": ["string", "constant.other.symbol"], + "settings": { "foreground": "#d5ff80" } + }, + { + "scope": ["string.regexp", "constant.character", "constant.other"], + "settings": { "foreground": "#95e6cb" } + }, + { "scope": ["constant.numeric"], "settings": { "foreground": "#dfbfff" } }, + { "scope": ["constant.language"], "settings": { "foreground": "#dfbfff" } }, + { + "scope": ["variable", "variable.parameter.function-call"], + "settings": { "foreground": "#cccac2" } + }, + { "scope": ["variable.member"], "settings": { "foreground": "#f28779" } }, + { + "scope": ["variable.language"], + "settings": { "fontStyle": "italic", "foreground": "#5ccfe6" } + }, + { "scope": ["storage"], "settings": { "foreground": "#ffa659" } }, + { + "scope": ["keyword.operator"], + "settings": { "foreground": "#f29e74", "fontStyle": "normal" } + }, + { + "scope": ["keyword"], + "settings": { "foreground": "#ffa659", "fontStyle": "bold italic" } + }, + { + "scope": ["punctuation.separator", "punctuation.terminator"], + "settings": { "foreground": "#cccac2b3" } + }, + { + "scope": ["punctuation.section"], + "settings": { "foreground": "#cccac2" } + }, + { + "scope": ["punctuation.accessor"], + "settings": { "foreground": "#f29e74" } + }, + { + "scope": ["punctuation.definition.template-expression"], + "settings": { "foreground": "#ffa659" } + }, + { + "scope": ["punctuation.section.embedded"], + "settings": { "foreground": "#ffa659" } + }, + { "scope": ["meta.embedded"], "settings": { "foreground": "#cccac2" } }, + { + "scope": [ + "source.java storage.type", + "source.haskell storage.type", + "source.c storage.type" + ], + "settings": { "foreground": "#73d0ff" } + }, + { + "scope": ["entity.other.inherited-class"], + "settings": { "foreground": "#5ccfe6" } + }, + { + "scope": ["storage.type.function"], + "settings": { "foreground": "#ffa659" } + }, + { + "scope": ["source.java storage.type.primitive"], + "settings": { "foreground": "#5ccfe6" } + }, + { + "scope": ["entity.name.function"], + "settings": { "foreground": "#ffcd66" } + }, + { + "scope": ["variable.parameter", "meta.parameter"], + "settings": { "foreground": "#dfbfff" } + }, + { + "scope": [ + "variable.function", + "variable.annotation", + "meta.function-call.generic", + "support.function.go" + ], + "settings": { "foreground": "#ffcd66" } + }, + { + "scope": ["support.function", "support.macro"], + "settings": { "foreground": "#f28779" } + }, + { + "scope": ["entity.name.import", "entity.name.package"], + "settings": { "foreground": "#d5ff80" } + }, + { "scope": ["entity.name"], "settings": { "foreground": "#73d0ff" } }, + { + "scope": ["entity.name.tag", "meta.tag.sgml"], + "settings": { "foreground": "#5ccfe6" } + }, + { + "scope": ["support.class.component"], + "settings": { "foreground": "#73d0ff" } + }, + { + "scope": [ + "punctuation.definition.tag.end", + "punctuation.definition.tag.begin", + "punctuation.definition.tag" + ], + "settings": { "foreground": "#5ccfe680" } + }, + { + "scope": ["entity.other.attribute-name"], + "settings": { "foreground": "#ffcd66" } + }, + { + "scope": ["entity.other.attribute-name.pseudo-class"], + "settings": { "foreground": "#95e6cb" } + }, + { + "scope": ["support.constant"], + "settings": { "fontStyle": "italic", "foreground": "#f29e74" } + }, + { + "scope": ["support.type", "support.class", "source.go storage.type"], + "settings": { "foreground": "#5ccfe6" } + }, + { + "scope": [ + "meta.decorator variable.other", + "meta.decorator punctuation.decorator", + "storage.type.annotation", + "entity.name.function.decorator" + ], + "settings": { "foreground": "#d9be98" } + }, + { "scope": ["invalid"], "settings": { "foreground": "#ff6666" } }, + { + "scope": ["meta.diff", "meta.diff.header"], + "settings": { "foreground": "#c594c5" } + }, + { + "scope": ["source.ruby variable.other.readwrite"], + "settings": { "foreground": "#ffcd66" } + }, + { + "scope": [ + "source.css entity.name.tag", + "source.sass entity.name.tag", + "source.scss entity.name.tag", + "source.less entity.name.tag", + "source.stylus entity.name.tag" + ], + "settings": { "foreground": "#73d0ff" } + }, + { + "scope": [ + "source.css support.type", + "source.sass support.type", + "source.scss support.type", + "source.less support.type", + "source.stylus support.type" + ], + "settings": { "foreground": "#6e7c8f" } + }, + { + "scope": ["support.type.property-name"], + "settings": { "fontStyle": "normal", "foreground": "#5ccfe6" } + }, + { + "scope": ["constant.numeric.line-number.find-in-files - match"], + "settings": { "foreground": "#6e7c8f" } + }, + { + "scope": ["constant.numeric.line-number.match"], + "settings": { "foreground": "#ffa659" } + }, + { + "scope": ["entity.name.filename.find-in-files"], + "settings": { "foreground": "#d5ff80" } + }, + { "scope": ["message.error"], "settings": { "foreground": "#ff6666" } }, + { + "scope": ["markup.heading", "markup.heading entity.name"], + "settings": { "fontStyle": "bold", "foreground": "#d5ff80" } + }, + { + "scope": ["markup.underline.link", "string.other.link"], + "settings": { "foreground": "#5ccfe6" } + }, + { + "scope": ["markup.italic", "emphasis"], + "settings": { "fontStyle": "italic", "foreground": "#f28779" } + }, + { + "scope": ["markup.bold"], + "settings": { "fontStyle": "bold", "foreground": "#f28779" } + }, + { "scope": ["markup.underline"], "settings": { "fontStyle": "underline" } }, + { + "scope": ["markup.italic markup.bold", "markup.bold markup.italic"], + "settings": { "fontStyle": "bold italic" } + }, + { "scope": ["markup.raw"], "settings": { "background": "#cccac205" } }, + { + "scope": ["markup.raw.inline"], + "settings": { "background": "#cccac20f" } + }, + { + "scope": ["meta.separator"], + "settings": { + "background": "#cccac20f", + "fontStyle": "bold", + "foreground": "#6e7c8f" + } + }, + { + "scope": ["markup.quote"], + "settings": { "fontStyle": "italic", "foreground": "#95e6cb" } + }, + { + "scope": ["markup.list punctuation.definition.list.begin"], + "settings": { "foreground": "#ffcd66" } + }, + { "scope": ["markup.inserted"], "settings": { "foreground": "#87d96c" } }, + { "scope": ["markup.changed"], "settings": { "foreground": "#80bfff" } }, + { "scope": ["markup.deleted"], "settings": { "foreground": "#f27983" } }, + { "scope": ["markup.strike"], "settings": { "foreground": "#d9be98" } }, + { "scope": ["markup.strong"], "settings": { "fontStyle": "bold" } }, + { + "scope": ["markup.table"], + "settings": { "background": "#cccac20f", "foreground": "#5ccfe6" } + }, + { + "scope": ["text.html.markdown markup.inline.raw"], + "settings": { "foreground": "#f29e74" } + }, + { + "scope": ["text.html.markdown meta.dummy.line-break"], + "settings": { "background": "#6e7c8f", "foreground": "#6e7c8f" } + }, + { + "scope": ["punctuation.definition.markdown"], + "settings": { "background": "#cccac2", "foreground": "#6e7c8f" } + } + ], + "type": "dark" +} diff --git a/themed/themed.in.css b/themed/themed.in.css index 94e0a5e4..ff4f4d1c 100644 --- a/themed/themed.in.css +++ b/themed/themed.in.css @@ -39,9 +39,10 @@ } table.blob td.linenumbers { - margin: 0; padding: 0 0.5em 0 0.5em; + margin: 0; padding: 0 0.5em 0 0.25em; vertical-align: top; text-align: right; + color: #474c57; /* border-right: 1px solid gray; */ } @@ -47,12 +47,12 @@ static void print_text_buffer(const char *name, char *buf, unsigned long size) if (ctx.repo->source_filter) { char *filter_arg = xstrdup(name); - html("<td class='lines'><pre><code>"); + html("<td class='lines'>"); cgit_open_filter(ctx.repo->source_filter, filter_arg); html_raw(buf, size); cgit_close_filter(ctx.repo->source_filter); free(filter_arg); - html("</code></pre></td></tr></table>\n"); + html("</td></tr></table>\n"); return; } |