@typefm/react-markdown-viewer 0.1.0

package/dist/styles/hljs.css

@@ -0,0 +1,332 @@
+/**
+ * Syntax Highlighting - GitHub Prettylights Theme
+ * 
+ * Based on GitHub's Prettylights syntax highlighting.
+ * Includes both light and dark variants automatically.
+ * 
+ * Customization Options:
+ * 
+ * 1. Override CSS variables:
+ *    .markdown-viewer {
+ *      --color-prettylights-syntax-keyword: #e06c75;
+ *      --color-prettylights-syntax-string: #98c379;
+ *    }
+ * 
+ * 2. Use highlight.js theme directly:
+ *    @import "highlight.js/styles/monokai.css";
+ *    
+ *    Popular themes: github-dark, github, monokai, dracula, nord,
+ *    vs2015, atom-one-dark, atom-one-light
+ *    See all: https://highlightjs.org/examples
+ */
+
+/* ============================================
+   Light Theme (default)
+   ============================================ */
+.markdown-viewer {
+  --color-prettylights-syntax-comment: #59636e;
+  --color-prettylights-syntax-constant: #0550ae;
+  --color-prettylights-syntax-constant-other-reference-link: #0a3069;
+  --color-prettylights-syntax-entity: #6639ba;
+  --color-prettylights-syntax-entity-tag: #0550ae;
+  --color-prettylights-syntax-keyword: #cf222e;
+  --color-prettylights-syntax-string: #0a3069;
+  --color-prettylights-syntax-string-regexp: #116329;
+  --color-prettylights-syntax-variable: #953800;
+  --color-prettylights-syntax-brackethighlighter-angle: #59636e;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #82071e;
+  --color-prettylights-syntax-carriage-return-text: #f6f8fa;
+  --color-prettylights-syntax-carriage-return-bg: #cf222e;
+  --color-prettylights-syntax-invalid-illegal-text: #f6f8fa;
+  --color-prettylights-syntax-invalid-illegal-bg: #82071e;
+  --color-prettylights-syntax-storage-modifier-import: #1f2328;
+  --color-prettylights-syntax-markup-heading: #0550ae;
+  --color-prettylights-syntax-markup-list: #3b2300;
+  --color-prettylights-syntax-markup-bold: #1f2328;
+  --color-prettylights-syntax-markup-italic: #1f2328;
+  --color-prettylights-syntax-markup-inserted-text: #116329;
+  --color-prettylights-syntax-markup-inserted-bg: #dafbe1;
+  --color-prettylights-syntax-markup-deleted-text: #82071e;
+  --color-prettylights-syntax-markup-deleted-bg: #ffebe9;
+  --color-prettylights-syntax-markup-changed-text: #953800;
+  --color-prettylights-syntax-markup-changed-bg: #ffd8b5;
+  --color-prettylights-syntax-markup-ignored-text: #d1d9e0;
+  --color-prettylights-syntax-markup-ignored-bg: #0550ae;
+  --color-prettylights-syntax-meta-diff-range: #8250df;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #818b98;
+}
+
+/* ============================================
+   Dark Theme (automatic via prefers-color-scheme)
+   ============================================ */
+@media (prefers-color-scheme: dark) {
+  .markdown-viewer {
+    --color-prettylights-syntax-comment: #9198a1;
+    --color-prettylights-syntax-constant: #79c0ff;
+    --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+    --color-prettylights-syntax-entity: #d2a8ff;
+    --color-prettylights-syntax-entity-tag: #7ee787;
+    --color-prettylights-syntax-keyword: #ff7b72;
+    --color-prettylights-syntax-string: #a5d6ff;
+    --color-prettylights-syntax-string-regexp: #7ee787;
+    --color-prettylights-syntax-variable: #ffa657;
+    --color-prettylights-syntax-brackethighlighter-angle: #9198a1;
+    --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+    --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+    --color-prettylights-syntax-carriage-return-bg: #b62324;
+    --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+    --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+    --color-prettylights-syntax-storage-modifier-import: #f0f6fc;
+    --color-prettylights-syntax-markup-heading: #1f6feb;
+    --color-prettylights-syntax-markup-list: #f2cc60;
+    --color-prettylights-syntax-markup-bold: #f0f6fc;
+    --color-prettylights-syntax-markup-italic: #f0f6fc;
+    --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+    --color-prettylights-syntax-markup-inserted-bg: #033a16;
+    --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+    --color-prettylights-syntax-markup-deleted-bg: #67060c;
+    --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+    --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+    --color-prettylights-syntax-markup-ignored-text: #f0f6fc;
+    --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+    --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+    --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
+  }
+}
+
+/* ============================================
+   Manual Dark Theme Toggle
+   Supports: .dark, [data-theme="dark"], .markdown-viewer.dark
+   ============================================ */
+.dark .markdown-viewer,
+[data-theme="dark"] .markdown-viewer,
+.markdown-viewer.dark {
+  --color-prettylights-syntax-comment: #9198a1;
+  --color-prettylights-syntax-constant: #79c0ff;
+  --color-prettylights-syntax-constant-other-reference-link: #a5d6ff;
+  --color-prettylights-syntax-entity: #d2a8ff;
+  --color-prettylights-syntax-entity-tag: #7ee787;
+  --color-prettylights-syntax-keyword: #ff7b72;
+  --color-prettylights-syntax-string: #a5d6ff;
+  --color-prettylights-syntax-string-regexp: #7ee787;
+  --color-prettylights-syntax-variable: #ffa657;
+  --color-prettylights-syntax-brackethighlighter-angle: #9198a1;
+  --color-prettylights-syntax-brackethighlighter-unmatched: #f85149;
+  --color-prettylights-syntax-carriage-return-text: #f0f6fc;
+  --color-prettylights-syntax-carriage-return-bg: #b62324;
+  --color-prettylights-syntax-invalid-illegal-text: #f0f6fc;
+  --color-prettylights-syntax-invalid-illegal-bg: #8e1519;
+  --color-prettylights-syntax-storage-modifier-import: #f0f6fc;
+  --color-prettylights-syntax-markup-heading: #1f6feb;
+  --color-prettylights-syntax-markup-list: #f2cc60;
+  --color-prettylights-syntax-markup-bold: #f0f6fc;
+  --color-prettylights-syntax-markup-italic: #f0f6fc;
+  --color-prettylights-syntax-markup-inserted-text: #aff5b4;
+  --color-prettylights-syntax-markup-inserted-bg: #033a16;
+  --color-prettylights-syntax-markup-deleted-text: #ffdcd7;
+  --color-prettylights-syntax-markup-deleted-bg: #67060c;
+  --color-prettylights-syntax-markup-changed-text: #ffdfb6;
+  --color-prettylights-syntax-markup-changed-bg: #5a1e02;
+  --color-prettylights-syntax-markup-ignored-text: #f0f6fc;
+  --color-prettylights-syntax-markup-ignored-bg: #1158c7;
+  --color-prettylights-syntax-meta-diff-range: #d2a8ff;
+  --color-prettylights-syntax-sublimelinter-gutter-mark: #3d444d;
+}
+
+/* ============================================
+   Token Mappings - Comments
+   // comment, /* comment */, # comment, <!-- comment -->
+   ============================================ */
+.hljs-comment,
+.hljs-quote {
+  color: var(--color-prettylights-syntax-comment);
+  font-style: italic;
+}
+
+/* ============================================
+   Token Mappings - Constants & Numbers
+   Numbers, booleans, null, undefined
+   ============================================ */
+.hljs-number,
+.hljs-literal,
+.hljs-boolean,
+.hljs-null {
+  color: var(--color-prettylights-syntax-constant);
+}
+
+/* ============================================
+   Token Mappings - Strings
+   "hello", 'world', `template`
+   ============================================ */
+.hljs-string,
+.hljs-link {
+  color: var(--color-prettylights-syntax-string);
+}
+
+.hljs-regexp,
+.hljs-symbol {
+  color: var(--color-prettylights-syntax-string-regexp);
+}
+
+/* ============================================
+   Token Mappings - Keywords & Control Flow
+   if, else, return, const, let, function, class, import, export, etc.
+   ============================================ */
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  color: var(--color-prettylights-syntax-keyword);
+}
+
+/* Built-ins and types */
+.hljs-built_in,
+.hljs-type {
+  color: var(--color-prettylights-syntax-keyword);
+}
+
+/* ============================================
+   Token Mappings - Entities
+   Function names, class names, titles
+   ============================================ */
+.hljs-title,
+.hljs-title.function_,
+.hljs-title.class_,
+.hljs-title.function_.inherited__ {
+  color: var(--color-prettylights-syntax-entity);
+}
+
+/* ============================================
+   Token Mappings - Variables & Parameters
+   $var, @attr, params, arguments
+   ============================================ */
+.hljs-variable,
+.hljs-template-variable,
+.hljs-params {
+  color: var(--color-prettylights-syntax-variable);
+}
+
+/* ============================================
+   Token Mappings - Tags (HTML/XML)
+   <div>, <span>, element names
+   ============================================ */
+.hljs-name,
+.hljs-tag {
+  color: var(--color-prettylights-syntax-entity-tag);
+}
+
+/* ============================================
+   Token Mappings - Attributes
+   href=, class=, id=, data-*=
+   ============================================ */
+.hljs-attr,
+.hljs-attribute {
+  color: var(--color-prettylights-syntax-constant);
+}
+
+/* ============================================
+   Token Mappings - Operators & Punctuation
+   =, +, -, *, /, {}, (), []
+   ============================================ */
+.hljs-punctuation {
+  color: var(--color-prettylights-syntax-brackethighlighter-angle);
+}
+
+.hljs-operator,
+.hljs-bullet {
+  color: var(--color-prettylights-syntax-keyword);
+}
+
+/* ============================================
+   Token Mappings - Properties
+   Object properties, CSS properties
+   ============================================ */
+.hljs-property {
+  color: var(--color-prettylights-syntax-constant);
+}
+
+/* ============================================
+   Token Mappings - Selectors (CSS)
+   .class, #id, element
+   ============================================ */
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: var(--color-prettylights-syntax-entity);
+}
+
+/* ============================================
+   Token Mappings - Diff Highlighting
+   + additions, - deletions
+   ============================================ */
+.hljs-addition {
+  color: var(--color-prettylights-syntax-markup-inserted-text);
+  background-color: var(--color-prettylights-syntax-markup-inserted-bg);
+}
+
+.hljs-deletion {
+  color: var(--color-prettylights-syntax-markup-deleted-text);
+  background-color: var(--color-prettylights-syntax-markup-deleted-bg);
+}
+
+/* ============================================
+   Token Mappings - Meta & Special
+   Preprocessor, shebang, annotations
+   ============================================ */
+.hljs-meta {
+  color: var(--color-prettylights-syntax-variable);
+}
+
+.hljs-meta .hljs-string {
+  color: var(--color-prettylights-syntax-string);
+}
+
+/* ============================================
+   Token Mappings - Storage/Import
+   import, export, module statements
+   ============================================ */
+.hljs-module-access,
+.hljs-formula {
+  color: var(--color-prettylights-syntax-storage-modifier-import);
+}
+
+/* ============================================
+   Token Mappings - Emphasis
+   Strong, emphasis in markdown
+   ============================================ */
+.hljs-strong {
+  font-weight: 600;
+  color: var(--color-prettylights-syntax-markup-bold);
+}
+
+.hljs-emphasis {
+  font-style: italic;
+  color: var(--color-prettylights-syntax-markup-italic);
+}
+
+/* ============================================
+   Token Mappings - Markup Headings
+   # Heading in markdown
+   ============================================ */
+.hljs-section {
+  font-weight: 600;
+  color: var(--color-prettylights-syntax-markup-heading);
+}
+
+/* ============================================
+   Invalid/Illegal Code
+   ============================================ */
+.hljs-invalid {
+  color: var(--color-prettylights-syntax-invalid-illegal-text);
+  background-color: var(--color-prettylights-syntax-invalid-illegal-bg);
+}
+
+/* ============================================
+   Pending State (language loading)
+   ============================================ */
+code[data-hljs-pending="true"] {
+  /* Optional: subtle indication that highlighting is pending */
+  /* opacity: 0.95; */
+}

package/dist/styles/index.css

@@ -0,0 +1,17 @@
+/**
+ * React Markdown Viewer - Combined Styles
+ * 
+ * This is the main entry point that imports all component styles.
+ * Import this single file to get complete styling for the viewer.
+ * 
+ * Individual imports available for tree-shaking:
+ *   - viewer.css  : Core markdown rendering styles
+ *   - alerts.css  : GitHub-style alert boxes
+ *   - katex.css   : Math/LaTeX rendering
+ *   - hljs.css    : Syntax highlighting theme
+ */
+
+@import './viewer.css';
+@import './alerts.css';
+@import './katex.css';
+@import './hljs.css';

package/dist/styles/katex.css

@@ -0,0 +1,74 @@
+/**
+ * KaTeX Math Rendering Styles
+ * 
+ * Styles for LaTeX/math rendering using KaTeX.
+ * KaTeX is loaded lazily when math content is detected.
+ * 
+ * Customization:
+ *   Override CSS variables or these classes to customize appearance.
+ *   
+ * Usage in markdown:
+ *   Inline:  $x^2 + y^2 = r^2$
+ *   Display: $$\int_0^\infty e^{-x^2} dx$$
+ */
+
+/* ============================================
+   KaTeX Rendered Output
+   Applied after KaTeX processes math content
+   ============================================ */
+.markdown-viewer .markdown .katex {
+  font-size: 1em;
+  max-width: 100%;
+  overflow-x: auto;
+  overflow-y: clip;
+}
+
+/* Display math (block-level) alignment */
+.markdown-viewer .markdown .katex-display {
+  text-align: left !important;
+  margin-left: 0 !important;
+}
+
+/* Display math error (block-level) - centered like valid display math */
+/* More specific selector to override .katex-display text-align */
+.markdown-viewer .markdown .katex-display.katex-error-display {
+  display: block;
+  text-align: center !important;
+  margin: 1em 0;
+}
+
+/* ============================================
+   Math Placeholder (Loading State)
+   Shown while KaTeX library loads asynchronously
+   ============================================ */
+.markdown-viewer .markdown .math-placeholder {
+  font-family: 'KaTeX_Math', 'Times New Roman', serif;
+  font-style: italic;
+  color: var(--fgColor-muted, #59636e);
+  padding: 0.1em 0.2em;
+  background: var(--bgColor-muted, #f6f8fa);
+  border-radius: 6px;
+}
+
+/* Display math placeholder (block-level) */
+.markdown-viewer .markdown .math-placeholder[data-math-style="display"] {
+  display: block;
+  text-align: center;
+  padding: 0.5em;
+  margin: 1em 0;
+}
+
+/* ============================================
+   Dark Theme Math Placeholder
+   ============================================ */
+:is(.dark, [data-theme="dark"]) .markdown-viewer .markdown .math-placeholder {
+  color: var(--fgColor-muted, #9198a1);
+  background: var(--bgColor-muted, #151b23);
+}
+
+@media (prefers-color-scheme: dark) {
+  .markdown-viewer:not(:is(.dark, [data-theme="dark"], [data-theme="light"]) *) .markdown .math-placeholder {
+    color: var(--fgColor-muted, #9198a1);
+    background: var(--bgColor-muted, #151b23);
+  }
+}