{"_id":"@arcmantle/mirage-mde-display","_rev":"3-f82cb7ec510fa591270e3fb264c2077c","name":"@arcmantle/mirage-mde-display","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@arcmantle/mirage-mde-display","version":"1.0.0","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/mirage-mde-display@1.0.0","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"38b72f72b019e5f6a8cad4924e8c242022777d30","tarball":"https://registry.npmjs.org/@arcmantle/mirage-mde-display/-/mirage-mde-display-1.0.0.tgz","fileCount":11,"integrity":"sha512-gZEBUKhWF9wI6ePkj/nDWNXqyVSpOPMqlolHws2Pi6B5gsQ5lel+Pl9wgJ6SC9++mS3GmFuTo3g4jPJw9ij9zw==","signatures":[{"sig":"MEYCIQDPoUPnTrElNESUvlkzreW9ybceV1B/mZVJxmV3egl9TwIhAMkJzejCmieamZFOMinbvVE3DZSqvUISP56xRRxIQJ5p","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":43726},"main":"./dist/mirage-mde-display.js","type":"module","_from":"file:arcmantle-mirage-mde-display-1.0.0.tgz","types":"./dist/mirage-mde-display.d.ts","exports":{".":"./dist/mirage-mde-display.js"},"scripts":{"dev":"vite build --watch","build":"vite build && tsc --project ./src/tsconfig.json","typecheck":"tsc --project ./src/tsconfig.json --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/28bc45c3af9605d75b63e94efe69b28e/arcmantle-mirage-mde-display-1.0.0.tgz","_integrity":"sha512-gZEBUKhWF9wI6ePkj/nDWNXqyVSpOPMqlolHws2Pi6B5gsQ5lel+Pl9wgJ6SC9++mS3GmFuTo3g4jPJw9ij9zw==","_npmVersion":"11.4.2","description":"A standalone markdown display component built with Lit Element. This package provides a clean, styled HTML renderer for markdown content with GitHub-flavored theming and syntax highlighting support.","directories":{},"_nodeVersion":"24.4.1","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.4","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.5","@arcmantle/vite-lib-config":"^1.0.0","@arcmantle/vite-plugin-import-css-sheet":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/mirage-mde-display_1.0.0_1752707787684_0.5399964571604121","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@arcmantle/mirage-mde-display","version":"1.0.1","author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","_id":"@arcmantle/mirage-mde-display@1.0.1","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"dist":{"shasum":"14ef96e0decff6e97cdf40f0178d4f3ec2e5df0a","tarball":"https://registry.npmjs.org/@arcmantle/mirage-mde-display/-/mirage-mde-display-1.0.1.tgz","fileCount":32,"integrity":"sha512-bw7a+AVTKRxL824+6YsuGvOMS3XQOUHKPMXWVUrU4ulG5sRTXJF2x8I7lIPDXMMEWWIBLvqXFv+EM1bCXL7lnw==","signatures":[{"sig":"MEYCIQCX68/SoRPUN8fld9uiXmnulx+LqgRjHIfKNKsv/IvzfgIhAI22zHYJUZrxvyXrM7qMeJUoUKZyM1G3Xd+qzaRSKB8A","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":78788},"main":"./dist/mirage-mde-display.js","type":"module","_from":"file:arcmantle-mirage-mde-display-1.0.1.tgz","types":"./dist/mirage-mde-display.d.ts","exports":{".":"./dist/mirage-mde-display.js"},"scripts":{"dev":"vite build --watch","build":"vite build && tsc --project ./src/tsconfig.json","typecheck":"tsc --project ./src/tsconfig.json --noEmit --emitDeclarationOnly false"},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"_resolved":"/tmp/770e019788093fba6929ac01ad926307/arcmantle-mirage-mde-display-1.0.1.tgz","_integrity":"sha512-bw7a+AVTKRxL824+6YsuGvOMS3XQOUHKPMXWVUrU4ulG5sRTXJF2x8I7lIPDXMMEWWIBLvqXFv+EM1bCXL7lnw==","_npmVersion":"11.4.2","description":"A standalone markdown display component built with Lit Element. This package provides a clean, styled HTML renderer for markdown content with GitHub-flavored theming and syntax highlighting support.","directories":{},"_nodeVersion":"24.4.1","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^7.0.4","rimraf":"^6.0.1","typescript":"^5.8.3","@types/node":"^24.0.14","@arcmantle/tsconfig":"^1.0.5","@arcmantle/vite-lib-config":"^1.0.0","@arcmantle/vite-plugin-import-css-sheet":"^1.0.1"},"_npmOperationalInternal":{"tmp":"tmp/mirage-mde-display_1.0.1_1752708419525_0.4469787744976408","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@arcmantle/mirage-mde-display","version":"1.0.2","description":"A standalone markdown display component built with Lit Element. This package provides a clean, styled HTML renderer for markdown content with GitHub-flavored theming and syntax highlighting support.","license":"Apache-2.0","author":{"name":"Kristoffer Roen-Lie"},"type":"module","exports":{".":"./dist/mirage-mde-display.js"},"main":"./dist/mirage-mde-display.js","types":"./dist/mirage-mde-display.d.ts","dependencies":{"lit":"^3.3.0","tslib":"^2.8.1"},"devDependencies":{"@arcmantle/tsconfig":"^1.0.5","@arcmantle/vite-lib-config":"^1.0.0","@arcmantle/vite-plugin-import-css-sheet":"^1.0.1","@types/node":"^24.0.14","rimraf":"^6.0.1","typescript":"^5.8.3","vite":"^7.0.4"},"scripts":{"build":"vite build && tsc --project ./src/tsconfig.json","dev":"vite build --watch","typecheck":"tsc --project ./src/tsconfig.json --noEmit --emitDeclarationOnly false"},"_id":"@arcmantle/mirage-mde-display@1.0.2","_integrity":"sha512-AOcVSo4A+JiCPB50V4y0Sihjgr9A9fWTBGrzl5QkdCxv+t/gMSrcTugc/BRFZjrhg9nqlJF9OqmiapsmztV5MA==","_resolved":"/tmp/d6f04c406182dc6a5efba8d6aa947f7b/arcmantle-mirage-mde-display-1.0.2.tgz","_from":"file:arcmantle-mirage-mde-display-1.0.2.tgz","_nodeVersion":"24.4.1","_npmVersion":"11.4.2","dist":{"integrity":"sha512-AOcVSo4A+JiCPB50V4y0Sihjgr9A9fWTBGrzl5QkdCxv+t/gMSrcTugc/BRFZjrhg9nqlJF9OqmiapsmztV5MA==","shasum":"303ec5c9807f2370408655b49b62a78bb3191eb4","tarball":"https://registry.npmjs.org/@arcmantle/mirage-mde-display/-/mirage-mde-display-1.0.2.tgz","fileCount":32,"unpackedSize":78788,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCICJe7HuQpZJ1CuFr/wwjE7eAMllKMSfpcZuAqHuuFlfvAiBxweWC8+MEWvebXnO8dmhjBRsi122g4fJrRuylxfzybQ=="}]},"_npmUser":{"name":"roenlie","email":"kristofferroenlie@gmail.com"},"directories":{},"maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/mirage-mde-display_1.0.2_1752757862433_0.953020760431174"},"_hasShrinkwrap":false}},"time":{"created":"2025-07-16T23:16:27.560Z","modified":"2025-07-17T13:11:02.824Z","1.0.0":"2025-07-16T23:16:27.857Z","1.0.1":"2025-07-16T23:26:59.760Z","1.0.2":"2025-07-17T13:11:02.624Z"},"author":{"name":"Kristoffer Roen-Lie"},"license":"Apache-2.0","description":"A standalone markdown display component built with Lit Element. This package provides a clean, styled HTML renderer for markdown content with GitHub-flavored theming and syntax highlighting support.","maintainers":[{"name":"roenlie","email":"kristofferroenlie@gmail.com"}],"readme":"# Mirage-MDE-Display\n\nA standalone markdown display component built with Lit Element. This package provides a clean, styled HTML renderer for markdown content with GitHub-flavored theming and syntax highlighting support.\n\n## Overview\n\nMirage-MDE-Display is the rendering component used by the Mirage-MDE editor for displaying formatted markdown content. It can be used independently as a markdown display component or as part of the larger Mirage-MDE ecosystem.\n\n## Features\n\n### Display Features\n\n- **GitHub-Flavored Styling**: Authentic GitHub markdown appearance\n- **Dual Theme Support**: Light and dark mode themes\n- **Syntax Highlighting**: Code block highlighting with customizable styles\n- **CSS Custom Properties**: Extensive theming capabilities\n- **Responsive Design**: Mobile-friendly responsive layout\n- **Semantic HTML**: Proper semantic markup for accessibility\n\n### Supported Markdown Elements\n\n- **Headings**: H1-H6 with GitHub-style anchor links\n- **Text Formatting**: Bold, italic, strikethrough, code spans\n- **Lists**: Ordered and unordered lists with nesting\n- **Links**: External and internal links with hover states\n- **Images**: Responsive images with alt text\n- **Code Blocks**: Syntax highlighted code with language detection\n- **Tables**: Full table support with striped rows\n- **Blockquotes**: Styled quote blocks\n- **Horizontal Rules**: Section dividers\n- **Task Lists**: Interactive checkboxes\n- **Footnotes**: Reference-style footnotes\n\n## Installation\n\n```bash\nnpm install @arcmantle/mirage-mde-display\n\npnpm add @arcmantle/mirage-mde-display\n\nyarn add @arcmantle/mirage-mde-display\n```\n\n## Basic Usage\n\n### HTML\n\n```html\n<mirage-mde-display\n  theme=\"dark\"\n  content=\"<h1>Hello World</h1><p>This is <strong>bold</strong> text.</p>\"\n></mirage-mde-display>\n```\n\n### JavaScript/TypeScript\n\n```typescript\nimport '@arcmantle/mirage-mde-display';\n\nconst display = document.querySelector('mirage-mde-display');\ndisplay.content = '<h1>Hello World</h1><p>This is <strong>bold</strong> text.</p>';\ndisplay.theme = 'dark';\n```\n\n### With Custom Styles\n\n```typescript\nconst display = document.querySelector('mirage-mde-display');\ndisplay.content = '<h1>Styled Content</h1>';\ndisplay.styles = `\n  .custom-highlight {\n    background-color: yellow;\n    padding: 2px 4px;\n    border-radius: 3px;\n  }\n`;\n```\n\n## Properties\n\n### `content` (string)\n\nThe HTML content to display. This should be properly sanitized HTML, typically generated from markdown.\n\n```typescript\ndisplay.content = '<p>Hello <em>world</em>!</p>';\n```\n\n### `theme` ('light' | 'dark')\n\nThe theme mode for the display. Defaults to 'dark'.\n\n```typescript\ndisplay.theme = 'light'; // or 'dark'\n```\n\n### `styles` (string)\n\nAdditional CSS styles to inject into the component.\n\n```typescript\ndisplay.styles = `\n  .markdown-body {\n    font-size: 18px;\n    line-height: 1.6;\n  }\n`;\n```\n\n## Theming\n\n### CSS Custom Properties\n\nThe component uses CSS custom properties for extensive theming. All properties are prefixed with `--mmdp-` (Mirage Markdown Display Properties).\n\n#### Basic Theming\n\n```css\nmirage-mde-display {\n  --mmdp-body-color: #333;\n  --mmdp-body-bg: #fff;\n  --mmdp-preview-family: Georgia, serif;\n  --mmdp-a-color: #0366d6;\n}\n```\n\n#### Dark Theme Variables\n\n```css\nmirage-mde-display[theme=\"dark\"] {\n  --mmdp-body-color: #c9d1d9;\n  --mmdp-body-bg: #0d1117;\n  --mmdp-a-color: #58a6ff;\n  --mmdp-blockquote-color: #8b949e;\n  --mmdp-blockquote-border-left: 0.25em solid #30363d;\n}\n```\n\n#### Light Theme Variables\n\n```css\nmirage-mde-display[theme=\"light\"] {\n  --mmdp-body-color: #24292f;\n  --mmdp-body-bg: #ffffff;\n  --mmdp-a-color: #0969da;\n  --mmdp-blockquote-color: #57606a;\n  --mmdp-blockquote-border-left: 0.25em solid #d0d7de;\n}\n```\n\n#### Code Highlighting\n\n```css\nmirage-mde-display {\n  --mmdp-hljs-color: #c9d1d9;\n  --mmdp-hljs-bg: #161b22;\n  --mmdp-hljs-comment: #768390;\n  --mmdp-hljs-keyword: #f47067;\n  --mmdp-hljs-string: #96d0ff;\n  --mmdp-hljs-function: #dcbdfb;\n}\n```\n\n## Advanced Usage\n\n### Custom Styling\n\n```typescript\nconst display = document.querySelector('mirage-mde-display');\ndisplay.styles = `\n  .markdown-body h1 {\n    color: #ff6b6b;\n    border-bottom: 2px solid #ff6b6b;\n  }\n\n  .markdown-body code {\n    background-color: rgba(255, 107, 107, 0.1);\n    color: #ff6b6b;\n  }\n\n  .markdown-body pre {\n    border-left: 4px solid #ff6b6b;\n    background-color: #1a1a1a;\n  }\n`;\n```\n\n### Integration with Markdown Parser\n\n```typescript\nimport { marked } from 'marked';\n\nconst markdownText = `\n# Hello World\n\nThis is **bold** text and this is *italic* text.\n\n\\`\\`\\`javascript\nconsole.log('Hello, world!');\n\\`\\`\\`\n`;\n\nconst htmlContent = marked(markdownText);\ndisplay.content = htmlContent;\n```\n\n### Dynamic Theme Switching\n\n```typescript\nconst display = document.querySelector('mirage-mde-display');\nconst themeToggle = document.querySelector('#theme-toggle');\n\nthemeToggle.addEventListener('click', () => {\n  display.theme = display.theme === 'light' ? 'dark' : 'light';\n});\n```\n\n## CSS Parts\n\nThe component exposes a `markdown-body` part for external styling:\n\n```css\nmirage-mde-display::part(markdown-body) {\n  padding: 20px;\n  border-radius: 8px;\n  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);\n}\n```\n\n## Integration with Mirage-MDE\n\nThis component is designed to work seamlessly with the Mirage-MDE editor:\n\n```typescript\nimport { MirageMDE } from '@arcmantle/mirage-mde';\n\nconst editor = new MirageMDE({\n  previewRender: async (markdown) => {\n    // Your markdown to HTML conversion\n    return convertMarkdownToHTML(markdown);\n  }\n});\n\n// The preview component internally uses mirage-mde-display\n```\n\n## Available CSS Variables\n\n### Typography\n\n- `--mmdp-preview-family`: Font family for content\n- `--mmdp-body-color`: Main text color\n- `--mmdp-body-bg`: Background color\n\n### Links\n\n- `--mmdp-a-color`: Link color\n- `--mmdp-octicon-link-color`: Anchor link icon color\n\n### Headings\n\n- `--mmdp-h1-bottom-border`: H1 bottom border\n- `--mmdp-h2-bottom-border`: H2 bottom border\n- `--mmdp-h6-color`: H6 specific color\n\n### Code\n\n- `--mmdp-codett-bg`: Inline code background\n- `--mmdp-pre-bg`: Code block background\n- `--mmdp-hljs-*`: Syntax highlighting colors\n\n### Tables\n\n- `--mmdp-table-thtd-border`: Table cell borders\n- `--mmdp-table-tr-bg`: Table row background\n- `--mmdp-table-tr-alternate-bg`: Alternating row background\n\n### UI Elements\n\n- `--mmdp-blockquote-color`: Blockquote text color\n- `--mmdp-blockquote-border-left`: Blockquote left border\n- `--mmdp-kbd-bg`: Keyboard key background\n- `--mmdp-mark-bg`: Highlighted text background\n\n## Browser Support\n\n- Chrome/Edge 88+\n- Firefox 84+\n- Safari 14+\n\n## Dependencies\n\n- **lit**: Web components framework (^3.3.0)\n\n## License\n\nApache-2.0\n\n## Contributing\n\nThis is part of the Arcmantle Weave component library. Please refer to the main repository for contribution guidelines.\n","readmeFilename":"README.md"}