diff --git a/.github/workflows/biome-check.yaml b/.github/workflows/biome-check.yaml index a97caae..56c9a83 100644 --- a/.github/workflows/biome-check.yaml +++ b/.github/workflows/biome-check.yaml @@ -20,7 +20,7 @@ jobs: - name: Run Clippy run: cd markdown-renderer && cargo clippy -- -D warnings - name: Run Tests - run: cd markdown-renderer && cargo test + run: cd markdown-renderer && cargo test --features sanitize biome: name: Run BiomeJS runs-on: ubuntu-latest diff --git a/.github/workflows/build-release.yml b/.github/workflows/build-release.yml index 7eea905..b1706e6 100644 --- a/.github/workflows/build-release.yml +++ b/.github/workflows/build-release.yml @@ -36,7 +36,7 @@ jobs: with: bun-version: latest - name: Build Rust project - run: cd markdown-renderer && wasm-pack build --target web --release + run: cd markdown-renderer && wasm-pack build --target web --features sanitize - name: Post-process wasm package run: bun process_wasm_pkg.js - name: Install dependencies (workspace) diff --git a/.github/workflows/github-pages.yml b/.github/workflows/github-pages.yml index 67666f6..bfa9095 100644 --- a/.github/workflows/github-pages.yml +++ b/.github/workflows/github-pages.yml @@ -3,7 +3,7 @@ name: Deploy Example to GitHub Pages on: push: branches: - - main + - main jobs: deploy: @@ -28,7 +28,7 @@ jobs: run: cargo install wasm-pack - name: Build Rust project - run: cd markdown-renderer && wasm-pack build --target web --release + run: cd markdown-renderer && wasm-pack build --target web --features sanitize - name: Post-process wasm package run: bun process_wasm_pkg.js @@ -43,11 +43,11 @@ jobs: run: cd example && bun install - name: Build example - run: cd example && bun run build + run: cd example && bun run build - name: Deploy to GitHub Pages uses: jamesives/github-pages-deploy-action@v4 with: token: ${{ secrets.GITHUB_TOKEN }} branch: gh-pages - folder: example/dist + folder: example/dist diff --git a/README.md b/README.md index bc7cbca..516986b 100644 --- a/README.md +++ b/README.md @@ -17,6 +17,8 @@ - Math rendering support (using a forked version of [comrak](https://github.com/DoublePrecision/comrak "comrak fork")) - Syntax highlighting using [syntect](https://github.com/trishume/syntect "syntect github") - Huge support for languages and themes +- Support for iframes (e.g. YouTube embeds) +- Sanitization of HTML and links for security with ammonia library - Easy to use ## Users @@ -102,6 +104,106 @@ const App: Component = () => { export default App; ``` +## Customising Code Block Headers + +The rendered code blocks include a header with a language label and buttons for copying and collapsing code. You can customise these using CSS. + +### CSS Classes + +| Class | Description | +|-------|-------------| +| `.code-block-wrapper` | Container wrapping the entire code block | +| `.code-block-header` | The header bar containing language label and buttons | +| `.code-block-language` | The language label text (e.g., "typescript") | +| `.code-block-buttons` | Container for the action buttons | +| `.code-block-copy` | The copy button | +| `.code-block-collapse` | The collapse/expand button | +| `.code-block-wrapper.collapsed` | Applied when code block is collapsed | +| `.code-block-copy.copied` | Applied when code has been copied (for 2 seconds) | + +### Example CSS + +```css +/* Dark theme header */ +.markdown-body .code-block-header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0.5rem 1rem; + background-color: #151b23; + border-bottom: 1px solid #3d444db3; +} + +/* Language label */ +.markdown-body .code-block-language { + font-size: 0.75rem; + font-weight: 500; + color: #9198a1; +} + +/* Button container */ +.markdown-body .code-block-buttons { + display: flex; + align-items: center; + gap: 0.5rem; +} + +/* Copy and collapse buttons */ +.markdown-body .code-block-copy, +.markdown-body .code-block-collapse { + display: flex; + align-items: center; + justify-content: center; + padding: 0.25rem 0.5rem; + font-size: 0.75rem; + color: #9198a1; + background: transparent; + border: 1px solid #3d444db3; + border-radius: 0.25rem; + cursor: pointer; + transition: all 0.15s ease-in-out; +} + +.markdown-body .code-block-copy:hover, +.markdown-body .code-block-collapse:hover { + color: #f0f6fc; + background-color: #656c7633; + border-color: #3d444d; +} + +/* Icon sizing */ +.markdown-body .code-block-copy svg, +.markdown-body .code-block-collapse svg { + width: 1rem; + height: 1rem; +} + +/* Hide code when collapsed */ +.markdown-body .code-block-wrapper.collapsed pre { + display: none; +} + +/* Success state after copying */ +.markdown-body .code-block-copy.copied { + color: #5eeed8; + border-color: #5eeed8; +} +``` + +### CSS Variables + +The default styles use CSS variables that you can override: + +| Variable | Description | Default (dark) | +|----------|-------------|----------------| +| `--bgColor-muted` | Header background | `#151b23` | +| `--borderColor-muted` | Border color | `#3d444db3` | +| `--fgColor-muted` | Muted text/icon color | `#9198a1` | +| `--fgColor-default` | Default text/icon color | `#f0f6fc` | +| `--bgColor-neutral-muted` | Hover background | `#656c7633` | +| `--borderColor-default` | Hover border color | `#3d444d` | +| `--fgColor-success` | Success state color | `#5eeed8` | + ## Available Themes and supported Languages For a list of available themes and languages, please refer to [THEMES_AND_LANGS.md](./THEMES_AND_LANGS.md). Autocomplete is also supported via your IDE as the themes are exported as unions of string literals. diff --git a/bun.lockb b/bun.lockb index 4673ade..af34656 100755 Binary files a/bun.lockb and b/bun.lockb differ diff --git a/example/src/App.tsx b/example/src/App.tsx index 7216aeb..a6bc102 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,8 +1,68 @@ -import { type Component, createSignal, onCleanup, onMount } from "solid-js"; -import { MarkdownRenderer } from "solid-markdown-wasm"; +import { + type Component, + For, + createSignal, + onCleanup, + onMount, +} from "solid-js"; +import { MarkdownRenderer, type Themes } from "solid-markdown-wasm"; import { MonacoEditor } from "solid-monaco"; +import haxiomLogo from "../src/assets/haxiom.svg"; import initialMarkdown from "../src/assets/markdown_preview.md?raw"; +// All available themes from the Rust lib.rs (matches the Themes type) +const CODE_THEMES: Themes[] = [ + "1337", + "OneHalfDark", + "OneHalfLight", + "Tomorrow", + "agola-dark", + "ascetic-white", + "axar", + "ayu-dark", + "ayu-light", + "ayu-mirage", + "base16-atelierdune-light", + "base16-ocean-dark", + "base16-ocean-light", + "bbedit", + "boron", + "charcoal", + "cheerfully-light", + "classic-modified", + "demain", + "dimmed-fluid", + "dracula", + "gray-matter-dark", + "green", + "gruvbox-dark", + "gruvbox-light", + "idle", + "inspired-github", + "ir-white", + "kronuz", + "material-dark", + "material-light", + "monokai", + "nord", + "nyx-bold", + "one-dark", + "railsbase16-green-screen-dark", + "solarized-dark", + "solarized-light", + "subway-madrid", + "subway-moscow", + "two-dark", + "visual-studio-dark", + "zenburn", +]; + +const EDITOR_THEMES = [ + { value: "vs", label: "Light" }, + { value: "vs-dark", label: "Dark" }, + { value: "hc-black", label: "High Contrast" }, +] as const; + const LoadingFallback = () => (