@peaceroad/markdown-it-renderer-fence 0.7.0 → 0.9.0

package/theme/rf-monochrome/index.js

@@ -0,0 +1,71 @@
+import { rendererFenceShikiThemeScopeGroups } from '../../src/custom-highlight/shiki-theme-role.js'
+
+const rfMonochromeThemeName = 'rf-monochrome'
+const rfMonochromeShikiThemeName = rfMonochromeThemeName
+
+const createTokenFontStyle = (scope, foreground, fontStyle) => ({
+  scope: Array.isArray(scope) ? scope.slice() : scope,
+  settings: { foreground, fontStyle },
+})
+
+const rfMonochromeNormalScopeOverrides = Object.freeze([
+  'keyword.operator.or.regexp',
+  'keyword.operator.quantifier.regexp',
+])
+
+const rfMonochromeCommentScopeOverrides = Object.freeze([
+  'comment.block.documentation.js storage.type.class.jsdoc',
+  'comment.block.documentation.ts storage.type.class.jsdoc',
+  'comment.block.documentation.js entity.name.type.instance.jsdoc',
+  'comment.block.documentation.ts entity.name.type.instance.jsdoc',
+  'comment.block.documentation.js variable.other.jsdoc',
+  'comment.block.documentation.ts variable.other.jsdoc',
+  'comment.block.documentation.js punctuation.definition.block.tag.jsdoc',
+  'comment.block.documentation.ts punctuation.definition.block.tag.jsdoc',
+  'comment.block.documentation.js punctuation.definition.bracket.curly.begin.jsdoc',
+  'comment.block.documentation.ts punctuation.definition.bracket.curly.begin.jsdoc',
+  'comment.block.documentation.js punctuation.definition.bracket.curly.end.jsdoc',
+  'comment.block.documentation.ts punctuation.definition.bracket.curly.end.jsdoc',
+])
+
+const createRfMonochromeShikiTheme = ({
+  name = rfMonochromeShikiThemeName,
+  foreground = 'currentColor',
+  background = 'transparent',
+  commentFontStyle = 'italic',
+  structuralFontStyle = 'bold',
+} = {}) => ({
+  name,
+  type: 'light',
+  colors: {
+    'editor.foreground': foreground,
+    'editor.background': background,
+  },
+  tokenColors: [
+    { settings: { foreground, background } },
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.comment, foreground, commentFontStyle),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.keyword, foreground, structuralFontStyle),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.type, foreground, structuralFontStyle),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.tag, foreground, structuralFontStyle),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.title, foreground, ''),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.string, foreground, ''),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.number, foreground, ''),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.literal, foreground, ''),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.variable, foreground, ''),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.attribute, foreground, ''),
+    createTokenFontStyle(rendererFenceShikiThemeScopeGroups.punctuation, foreground, ''),
+    createTokenFontStyle(rfMonochromeNormalScopeOverrides, foreground, ''),
+    createTokenFontStyle(rfMonochromeCommentScopeOverrides, foreground, commentFontStyle),
+  ],
+})
+
+const rfMonochromeShikiTheme = createRfMonochromeShikiTheme()
+const rfMonochromeShikiThemeScopeGroups = rendererFenceShikiThemeScopeGroups
+
+export {
+  createRfMonochromeShikiTheme,
+  rfMonochromeShikiTheme,
+  rfMonochromeShikiThemeName,
+  rfMonochromeShikiThemeScopeGroups,
+  rfMonochromeThemeName,
+}

package/theme/rf-monochrome/markup/highlightjs.css

@@ -0,0 +1,150 @@
+/*! rf-monochrome highlightjs markup theme | MIT License */
+
+:root {
+  --rf-monochrome-strong-font-weight: 700;
+  --rf-monochrome-normal-font-weight: 400;
+  --rf-monochrome-comment-font-style: italic;
+  --rf-monochrome-meta-font-style: normal;
+  --rf-monochrome-meta-font-weight: var(--rf-monochrome-normal-font-weight);
+  --rf-monochrome-doctag-font-weight: var(--rf-monochrome-normal-font-weight);
+}
+
+pre {
+  --rf-monochrome-fg: var(--rf-code-fg);
+  --rf-monochrome-bg: var(--rf-code-bg);
+  color: var(--rf-monochrome-fg);
+  background: var(--rf-monochrome-bg);
+}
+
+pre code,
+pre samp,
+.hljs {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+  background: transparent;
+}
+
+/*
+ * `samp` represents terminal I/O. Keep the terminal surface inverted while
+ * suppressing per-token emphasis below, so command/output lines remain easy to
+ * distinguish from code.
+ */
+pre:has(> samp) {
+  --rf-monochrome-fg: var(--rf-samp-fg);
+  --rf-monochrome-bg: var(--rf-samp-bg);
+  color: var(--rf-monochrome-fg);
+  background: var(--rf-monochrome-bg);
+  border-color: var(--rf-samp-border);
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-title.class_,
+.hljs-section,
+.hljs-name,
+.hljs-type,
+.hljs-strong {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+  font-weight: var(--rf-monochrome-strong-font-weight, 700);
+}
+
+.hljs-title,
+.hljs-title.function_,
+.hljs-built_in,
+.hljs-function,
+.hljs-class {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+  font-weight: var(--rf-monochrome-normal-font-weight, 400);
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-emphasis {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+  /*
+   * Italic comments are useful in one-color Latin code samples, but CJK
+   * comments can become harder to read. Sites with many Japanese/Chinese/Korean
+   * comments can override --rf-monochrome-comment-font-style: normal.
+   */
+  font-style: var(--rf-monochrome-comment-font-style, italic);
+}
+
+/*
+ * CJK fonts rarely provide a true italic face. Let the inherited document or
+ * container language disable synthetic italics for comments automatically.
+ * `:lang(ja)` also matches language tags such as `ja-JP`.
+ */
+.hljs-comment:lang(ja),
+.hljs-comment:lang(zh),
+.hljs-comment:lang(ko) {
+  --rf-monochrome-comment-font-style: normal;
+}
+
+.hljs-meta,
+.hljs-doctag {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+  font-style: var(--rf-monochrome-meta-font-style, normal);
+  font-weight: var(--rf-monochrome-meta-font-weight, 400);
+}
+
+.hljs-comment .hljs-doctag {
+  font-style: inherit;
+  font-weight: var(--rf-monochrome-doctag-font-weight, 400);
+}
+
+.hljs-comment .hljs-type,
+.hljs-comment .hljs-variable {
+  font-style: inherit;
+  font-weight: var(--rf-monochrome-normal-font-weight, 400);
+}
+
+/*
+ * Keep terminal prompts one-color even when the color preset is loaded before
+ * this theme. The color preset intentionally gives `samp` prompts an accent
+ * color, and its selector is more specific than plain `.hljs-meta`.
+ */
+.hljs-meta.prompt_,
+pre:has(> samp) .hljs-meta.prompt_ {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-number,
+.hljs-literal,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attr,
+.hljs-attribute,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-property,
+.hljs-params,
+.hljs-subst,
+.hljs-tag,
+.hljs-punctuation,
+.hljs-operator,
+.hljs-bullet,
+.hljs-link,
+.hljs-addition,
+.hljs-deletion {
+  color: var(--rf-monochrome-fg, var(--rf-code-fg));
+  font-style: normal;
+  font-weight: var(--rf-monochrome-normal-font-weight, 400);
+}
+
+.hljs-addition,
+.hljs-deletion {
+  background: transparent;
+}
+
+/*
+ * `samp` usually represents terminal I/O rather than source-code structure.
+ * Keep prompts and shell control words from becoming heavier than nearby
+ * commands/output; otherwise terminal snippets can look inconsistent.
+ */
+pre:has(> samp) [class^="hljs-"],
+pre:has(> samp) [class*=" hljs-"] {
+  font-style: normal;
+  font-weight: var(--rf-monochrome-normal-font-weight, 400);
+}

package/theme/rf-monochrome/markup/shiki.css

@@ -0,0 +1,38 @@
+/*! rf-monochrome Shiki markup overrides | MIT License */
+
+/*
+ * Shiki markup writes background/color as inline styles. The complete CSS
+ * preset maps monochrome source-code blocks to the shared code surface, while
+ * the standalone theme object can still be used as a currentColor theme.
+ */
+pre.rf-monochrome {
+  color: var(--rf-code-fg) !important;
+  background-color: var(--rf-code-bg) !important;
+}
+
+pre:has(> samp).rf-monochrome {
+  color: var(--rf-samp-fg) !important;
+  background-color: var(--rf-samp-bg) !important;
+  border-color: var(--rf-samp-border);
+}
+
+/*
+ * Shiki also emits font-weight/font-style inline. Limit this important override
+ * to monochrome `samp` blocks so normal one-color source-code blocks can still
+ * use bold/italic as their only syntax cues.
+ */
+pre:has(> samp).rf-monochrome span[style] {
+  font-style: normal !important;
+  font-weight: var(--rf-monochrome-normal-font-weight, 400) !important;
+}
+
+/*
+ * The rf-monochrome Shiki theme emits italic only for comment scopes by
+ * default. Normalize those inline styles when the inherited language is CJK;
+ * `!important` is required because Shiki writes font-style inline.
+ */
+pre.rf-monochrome span[style*="font-style"][style*="italic"]:lang(ja),
+pre.rf-monochrome span[style*="font-style"][style*="italic"]:lang(zh),
+pre.rf-monochrome span[style*="font-style"][style*="italic"]:lang(ko) {
+  font-style: normal !important;
+}