From 911168ce5661b2173dd8a1c9e19065351b69bff8 Mon Sep 17 00:00:00 2001 From: Ruslan Semak Date: Fri, 11 Apr 2025 14:01:20 +0300 Subject: [PATCH] feat: Customized prismjs theme "vsc-dark-plus" --- .babelrc | 2 +- dev/build/Dockerfile | 7 + package.json | 2 +- prism-vsc-dark-plus.css | 278 ++++++++++++++++++++++++++++++++++++++++ 4 files changed, 287 insertions(+), 2 deletions(-) create mode 100644 prism-vsc-dark-plus.css diff --git a/.babelrc b/.babelrc index f4f5fff1..30fdaa4f 100644 --- a/.babelrc +++ b/.babelrc @@ -21,7 +21,7 @@ "prismjs", { "languages": ["typescript", "ts", "tsx"], "plugins": ["line-numbers", "match-braces", "autoloader", "normalize-whitespace", "copy-to-clipboard", "toolbar"], - "theme": "tomorrow", + "theme": "vsc-dark-plus", "css": true } ] diff --git a/dev/build/Dockerfile b/dev/build/Dockerfile index f2b5630f..52f9d708 100644 --- a/dev/build/Dockerfile +++ b/dev/build/Dockerfile @@ -14,13 +14,19 @@ COPY ./package.json ./package.json COPY ./.babelrc ./.babelrc COPY ./.eslintignore ./.eslintignore COPY ./.eslintrc.yml ./.eslintrc.yml +COPY ./prism-vsc-dark-plus.css ./prism-vsc-dark-plus.css +COPY ./prism-vsc-dark-plus.css ./node_modules/prismjs/themes/prism-vsc-dark-plus.css RUN yarn cache clean RUN yarn --frozen-lockfile --non-interactive +COPY ./prism-vsc-dark-plus.css ./node_modules/prismjs/themes/prism-vsc-dark-plus.css + RUN yarn build RUN rm -rf /wiki/node_modules RUN yarn --production --frozen-lockfile --non-interactive +COPY ./prism-vsc-dark-plus.css ./node_modules/prismjs/themes/prism-vsc-dark-plus.css RUN yarn patch-package +COPY ./prism-vsc-dark-plus.css ./node_modules/prismjs/themes/prism-vsc-dark-plus.css # =============== # --- Release --- @@ -38,6 +44,7 @@ WORKDIR /wiki COPY --chown=node:node --from=assets /wiki/assets ./assets COPY --chown=node:node --from=assets /wiki/node_modules ./node_modules +#COPY --chown=node:node --from=assets /wiki/prism-vsc-dark-plus.css ./node_modules/prismjs/themes/prism-vsc-dark-plus.css COPY --chown=node:node ./server ./server COPY --chown=node:node --from=assets /wiki/server/views ./server/views COPY --chown=node:node ./config.yml ./config.yml diff --git a/package.json b/package.json index e85362ae..acf11a47 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "releaseDate": "2019-01-01T01:01:01.000Z", "description": "A modern, lightweight and powerful wiki app built on NodeJS, Git and Markdown", "main": "wiki.js", - "dev": true, + "dev": false, "scripts": { "start": "node server", "dev": "NODE_OPTIONS=--openssl-legacy-provider node dev", diff --git a/prism-vsc-dark-plus.css b/prism-vsc-dark-plus.css new file mode 100644 index 00000000..caab9c0e --- /dev/null +++ b/prism-vsc-dark-plus.css @@ -0,0 +1,278 @@ +pre[class*="language-"], +code[class*="language-"] { + color: #d4d4d4; + font-size: 13px; + text-shadow: none; + font-family: Menlo, Monaco, Consolas, "Andale Mono", "Ubuntu Mono", "Courier New", monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::selection, +code[class*="language-"]::selection, +pre[class*="language-"] *::selection, +code[class*="language-"] *::selection { + text-shadow: none; + background: #264F78; +} + +@media print { + pre[class*="language-"], + code[class*="language-"] { + text-shadow: none; + } +} + +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + background: #1e1e1e; +} + +:not(pre) > code[class*="language-"] { + padding: .1em .3em; + border-radius: .3em; + color: #db4c69; + background: #1e1e1e; +} +/********************************************************* +* Tokens +*/ +.namespace { + opacity: .7; +} + +.token.doctype .token.doctype-tag { + color: #569CD6; +} + +.token.doctype .token.name { + color: #9cdcfe; +} + +.token.comment, +.token.prolog { + color: #7a7e85; +} + +.token.punctuation, +.language-html .language-css .token.punctuation, +.language-html .language-javascript .token.punctuation { + color: #d4d4d4; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.inserted, +.token.unit { + color: #b5cea8; +} + +.token.selector, +.token.attr-name, +.token.builtin, +.token.deleted { + color: #ce9178; +} + +.token.char, +.token.string { + color: #6a9955; +} + +.language-css .token.string.url { + text-decoration: underline; +} + +.token.operator, +.token.entity { + color: #d4d4d4; +} + +.token.operator.arrow { + color: #569CD6; +} + +.token.atrule { + color: #ce9178; +} + +.token.atrule .token.rule { + color: #c586c0; +} + +.token.atrule .token.url { + color: #9cdcfe; +} + +.token.atrule .token.url .token.function { + color: #dcdcaa; +} + +.token.atrule .token.url .token.punctuation { + color: #d4d4d4; +} + +.token.keyword { + color: #569CD6; +} + +.token.keyword.module, +.token.keyword.control-flow { + color: #c586c0; +} + +.token.function, +.token.function .token.maybe-class-name { + color: #dcdcaa; +} + +.token.regex { + color: #d16969; +} + +.token.important { + color: #569cd6; +} + +.token.italic { + font-style: italic; +} + +.token.constant { + color: #9cdcfe; +} + +.token.class-name, +.token.maybe-class-name { + color: #4ec9b0; +} + +.token.console { + color: #9cdcfe; +} + +.token.parameter { + color: #9cdcfe; +} + +.token.interpolation { + color: #9cdcfe; +} + +.token.punctuation.interpolation-punctuation { + color: #569cd6; +} + +.token.boolean { + color: #569cd6; +} + +.token.property, +.token.variable, +.token.imports .token.maybe-class-name, +.token.exports .token.maybe-class-name { + color: #9cdcfe; +} + +.token.selector { + color: #d7ba7d; +} + +.token.escape { + color: #d7ba7d; +} + +.token.tag { + color: #569cd6; +} + +.token.tag .token.punctuation { + color: #808080; +} + +.token.cdata { + color: #808080; +} + +.token.attr-name { + color: #9cdcfe; +} + +.token.attr-value, +.token.attr-value .token.punctuation { + color: #ce9178; +} + +.token.attr-value .token.punctuation.attr-equals { + color: #d4d4d4; +} + +.token.entity { + color: #569cd6; +} + +.token.namespace { + color: #4ec9b0; +} +/********************************************************* +* Language Specific +*/ + +pre[class*="language-javascript"], +code[class*="language-javascript"], +pre[class*="language-jsx"], +code[class*="language-jsx"], +pre[class*="language-typescript"], +code[class*="language-typescript"], +pre[class*="language-tsx"], +code[class*="language-tsx"] { + color: #9cdcfe; +} + +pre[class*="language-css"], +code[class*="language-css"] { + color: #ce9178; +} + +pre[class*="language-html"], +code[class*="language-html"] { + color: #d4d4d4; +} + +.language-regex .token.anchor { + color: #dcdcaa; +} + +.language-html .token.punctuation { + color: #808080; +} +/********************************************************* +* Line highlighting +*/ +pre[class*="language-"] > code[class*="language-"] { + position: relative; + z-index: 1; +} + +.line-highlight.line-highlight { + background: #f7ebc6; + box-shadow: inset 5px 0 0 #f7d87c; + z-index: 0; +}