From 99bdda45538dc55d533d79523b05755474f3e045 Mon Sep 17 00:00:00 2001 From: Skyebee Date: Fri, 28 Aug 2026 15:26:00 -0400 Subject: [PATCH] Revert prismjs to default theme, update README --- README.md | 38 ++++++++++++++++++++++- theme/libs/prism.css | 72 +++++++++++++++++++++++++++----------------- theme/libs/prism.js | 2 +- 3 files changed, 83 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index ab4deee..4e8dcaa 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,41 @@ These shortcodes are part of the theme and are all located in the file `/theme/f You can edit this file to change existing shortcodes or add even more. An example-page with all shortcodes is provided with the installation: `/pages-en/examples.md` +## Syntax Highlighting +When constructing a fenced code block, specify a language and prismjs will highlight syntax accordingly. + +Here is some of flatMark's own CSS, by way of example: + +```css +* {margin: 0;padding: 0;box-sizing: border-box;} +header, footer, section, article, nav {display: block;} + +body {background: var(--website-background);color: var(--colordark);font-family: 'opensans', Arial, Helvetica, Sans-Serif;font-weight: 400;font-style: normal;font-size: var(--fontsize-m); line-height: 1.4;} + +#wrapper {max-width: var(--content-width);margin: 0 auto;padding: var(--space-below-02) var(--side-space-01);} +header, main {background: var(--colorlight);} + +h1 {font-size: var(--fontsize-xxl); font-weight: 800;color: var(--colordark);margin-bottom: var(--space-below-01);} +h2 {font-size: var(--fontsize-xl); font-weight: 800;color: var(--color-01);} +h3 {font-size: var(--fontsize-l); font-weight: 700;} + +h2, h3, p, ul, ol, table {margin-bottom: var(--space-below-01);} +``` + +The development (non-minimized) version is included, and selected syntaxes are: +* markup +* css +* "c-like" +* javascript +* awk +* bash +* diff +* gdscript +* java +* json +* python + +Additionally, the diff-highlight plugin is included. If you'd like to change the selected languages or select a theme other than default, visit the prism.js website, and simply replace `theme/libs/prism.js` and `prism.css` with your preferred version. ## Customization All customizable parts of flatMark are located in the `theme/` folder: @@ -167,4 +202,5 @@ FlatMark is released under the MIT License. ## Credits This project uses; - [Parsedown](https://parsedown.org) — MIT License -- [Open Sans font](https://www.fontsquirrel.com/fonts/open-sans) — Apache License 2.0 \ No newline at end of file +- [prismjs](https://prismjs.com) - MIT License +- [Open Sans font](https://www.fontsquirrel.com/fonts/open-sans) — Apache License 2.0 diff --git a/theme/libs/prism.css b/theme/libs/prism.css index caf33f0..cd9610a 100644 --- a/theme/libs/prism.css +++ b/theme/libs/prism.css @@ -1,16 +1,16 @@ /* PrismJS 1.30.0 -https://prismjs.com/download#themes=prism-okaidia&languages=markup+css+clike+javascript+diff+gdscript+python&plugins=diff-highlight */ +https://prismjs.com/download#themes=prism&languages=markup+css+clike+javascript+awk+bash+diff+gdscript+java+json+python&plugins=diff-highlight */ /** - * okaidia theme for JavaScript, CSS and HTML - * Loosely based on Monokai textmate theme by http://www.monokai.nl/ - * @author ocodia + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou */ code[class*="language-"], pre[class*="language-"] { - color: #f8f8f2; + color: black; background: none; - text-shadow: 0 1px rgba(0, 0, 0, 0.3); + text-shadow: 0 1px white; font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; font-size: 1em; text-align: left; @@ -30,17 +30,36 @@ pre[class*="language-"] { hyphens: none; } +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + /* background: #b3d4fc; */ + background: var(--color-gray-01) +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: var(--color-gray-01); +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + /* Code blocks */ pre[class*="language-"] { padding: 1em; margin: .5em 0; overflow: auto; - border-radius: 0.3em; } :not(pre) > code[class*="language-"], pre[class*="language-"] { - background:#0c0534; + background: var(--color-gray-01); } /* Inline code */ @@ -54,11 +73,11 @@ pre[class*="language-"] { .token.prolog, .token.doctype, .token.cdata { - color: #8292a2; + color: slategray; } .token.punctuation { - color: #f8f8f2; + color: #999; } .token.namespace { @@ -67,15 +86,12 @@ pre[class*="language-"] { .token.property, .token.tag, +.token.boolean, +.token.number, .token.constant, .token.symbol, .token.deleted { - color: #f92672; -} - -.token.boolean, -.token.number { - color: #ae81ff; + color: #905; } .token.selector, @@ -84,32 +100,34 @@ pre[class*="language-"] { .token.char, .token.builtin, .token.inserted { - color: #a6e22e; + color: #690; } .token.operator, .token.entity, .token.url, .language-css .token.string, -.style .token.string, -.token.variable { - color: #f8f8f2; +.style .token.string { + color: #9a6e3a; + /* This background color was intended by the author of this theme. */ + background: hsla(0, 0%, 100%, .5); } .token.atrule, .token.attr-value, -.token.function, -.token.class-name { - color: #e6db74; +.token.keyword { + color: #07a; } -.token.keyword { - color: #66d9ef; +.token.function, +.token.class-name { + color: #DD4A68; } .token.regex, -.token.important { - color: #fd971f; +.token.important, +.token.variable { + color: #e90; } .token.important, diff --git a/theme/libs/prism.js b/theme/libs/prism.js index 57fb799..604a5cb 100644 --- a/theme/libs/prism.js +++ b/theme/libs/prism.js @@ -1,5 +1,5 @@ /* PrismJS 1.30.0 -https://prismjs.com/download#themes=prism-okaidia&languages=markup+css+clike+javascript+awk+bash+diff+gdscript+java+json+python&plugins=diff-highlight */ +https://prismjs.com/download#themes=prism&languages=markup+css+clike+javascript+awk+bash+diff+gdscript+java+json+python&plugins=diff-highlight */ /// var _self = (typeof window !== 'undefined') -- 2.47.3