Maintainers
Pricing
Enterprise
More
More
Documentation
Try Live
Rankings
Install
Blog
Docs7
Ask
New
Add Docs
ZeroMD
https://github.com/zerodevx/zero-md
Admin
Ridiculously simple zero-config markdown displayer
Tokens:
15,397
Snippets:
90
Trust Score:
7.3
License:
ISC
Update:
1 year ago
Context
Chat
Benchmark
Latest
Show doc for...
Code
Info
Show Results
Tokens:
Raw
Copy
Link
Tokens:
Raw
Copy
Link
### Javascript Console Log Source: https://github.com/zerodevx/zero-md/blob/main/src/fixtures/feat.html A basic Javascript snippet that prints 'hello world!' to the console. This is a fundamental example for demonstrating Javascript execution. ```javascript console.log('hello world!') ``` -------------------------------- ### Install zero-md with npm and Use in JavaScript Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This JavaScript snippet demonstrates how to install zero-md using npm and integrate it into a web project. It shows importing the `ZeroMd` class, registering it as a custom element, and then using the `<zero-md>` tag within an application's rendering logic. ```javascript // Import element definition import ZeroMd from 'zero-md' // Register custom element customElements.define('zero-md', ZeroMd) // Render anywhere app.render(`<zero-md src=${src}></zero-md>`) ``` -------------------------------- ### Install zero-md via CDN and Register Manually Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This HTML snippet illustrates an alternative CDN installation method for zero-md. It imports the element definition and then manually registers the custom element 'zero-md' using `customElements.define()`, providing more control over the registration process. ```html <head> ... <script type="module"> // Import element definition import ZeroMd from 'https://cdn.jsdelivr.net/npm/zero-md@3' // Register customElements.define('zero-md', ZeroMd) </script> </head> ``` -------------------------------- ### Install and use zero-md in web projects (npm/yarn) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/installation.md This section covers installing zero-md using npm or yarn, followed by importing and registering the custom element in JavaScript. It also shows how to render the component programmatically. This method is suitable for projects managed with Node.js. ```bash $ npm install --save zero-md ``` ```javascript // Import the element definition import ZeroMd from 'zero-md' // Register the custom element customElements.define('zero-md', ZeroMd) // Render anywhere app.render(`<zero-md src=${src}></zero-md>`, target) ``` ```html <script type="module" src="/node_modules/zero-md/dist/zero-md.min.js"></script> ... <zero-md src="example.md"></zero-md> ``` -------------------------------- ### Basic zero-md Usage Examples Source: https://github.com/zerodevx/zero-md/blob/main/README.md This section provides examples of how to use the zero-md web component. It covers displaying an external markdown file using the `src` attribute, rendering markdown directly within a `<script type="text/markdown">` tag, and customizing styles by appending CSS within a `<template>` tag. ```html <!-- Simply set the `src` attribute and win --> <zero-md src="https://example.com/markdown.md"></zero-md> <!-- Or write markdown inline --> <zero-md> <!-- Write your markdown inside a `<script type="text/markdown">` tag --> <script type="text/markdown"> # **This** is my [markdown](https://example.com) </script> </zero-md> <!-- Or update the style --> <zero-md src="https://example.com/markdown.md"> <!-- Wrap `style` tags inside `template` --> <template data-append> <style> p { color: red; } </style> </template> </zero-md> ``` -------------------------------- ### Install zero-md via npm and Use in JavaScript Source: https://github.com/zerodevx/zero-md/blob/main/README.md This code demonstrates how to install zero-md using npm and then import and register the custom element in a JavaScript project. It shows the programmatic way to integrate zero-md into a web application, allowing for dynamic rendering. ```bash $ npm i zero-md ``` ```javascript // Import the element definition import ZeroMd from 'zero-md' // Register the custom element customElements.define('zero-md', ZeroMd) // Render anywhere app.render(`<zero-md src=${src}></zero-md>`, target) ``` -------------------------------- ### Zero-MD with Default Stylesheet Template Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/basic-usage.md This example demonstrates the semantic equivalent of the basic usage, explicitly showing the default template that loads Github-markdown CSS and PrismJS highlighting styles. ```html <zero-md src="https://example.com/markdown.md"> <template> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css" /> </template> </zero-md> ``` -------------------------------- ### Run zero-md Dev Server (Shell) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/contributing.md Starts the development server for zero-md. This command is typically run from the project's root directory. After execution, navigate to http://localhost:8000 in your browser to view the test suite. ```shell $ npm run dev ``` -------------------------------- ### MathJax/KaTeX Math Expressions Source: https://github.com/zerodevx/zero-md/blob/main/src/fixtures/feat.html Examples of inline and block-level mathematical expressions rendered using MathJax or KaTeX. Supports various mathematical notations including square roots and summations. ```katex I = \pm\sqrt{a^2 + b^2} ``` ```katex B = \pm\sqrt{a^2 + b^2} ``` ```math \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) ``` -------------------------------- ### Support MathJax with zero-md Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/recipes.md This recipe explains how to render mathematical equations using MathJax within zero-md. It requires loading the MathJax library and configuring its settings for inline math delimiters. An event listener is set up to trigger MathJax's typesetting after zero-md has rendered its content. The example includes a sample Markdown file with inline math and the corresponding HTML setup. ```html <head> <script> // Configure MathJax settings MathJax = { tex: { inlineMath: [ ['$', '$'], ['\\(', '\\)'] ] } } addEventListener('zero-md-rendered', () => MathJax.typeset()) </script> <!-- Load MathJax library --> <script defer src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js"></script> <!-- Load zero-md --> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> </head> <body> <!-- Render zero-md into light dom --> <zero-md src="math.md" no-shadow></zero-md> </body> ``` -------------------------------- ### Mermaid Flowchart and Sequence Diagram Source: https://github.com/zerodevx/zero-md/blob/main/src/fixtures/feat.html Code snippets for generating visual diagrams using Mermaid. Includes a flowchart for deployment processes and a sequence diagram illustrating communication between entities. ```mermaid flowchart TD A[Deploy to production] --> B{Is it Friday?}; B --> |Yes| C[Do not deploy!]; B --> |No| D[Run deploy.sh to deploy!]; C --> E[Enjoy your weekend!]; D --> E[Enjoy your weekend!]; ``` ```mermaid sequenceDiagram Pumbaa->>Timon:I ate like a pig. Timon->>Pumbaa:Pumbaa, you ARE a pig. ``` -------------------------------- ### Render Inline Math Equations with LaTeX Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This showcases the inline math rendering capability of zero-md using LaTeX syntax enclosed in single dollar signs (`$`). It provides an example of a mathematical expression that will be rendered by the KaTeX library. ```text $\sqrt{3x-1}+(1+x)^2$ ``` -------------------------------- ### Render Block-Level Math Equations with LaTeX Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This example demonstrates how to render block-level mathematical equations using LaTeX syntax enclosed in double dollar signs (`$$`). The rendered output will be displayed as a distinct block, suitable for more complex equations. ```text $$\sqrt{3x-1}+(1+x)^2$$ ``` -------------------------------- ### Load Marked and Prism Scripts Before Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/migration-guide.md The `marked-url` and `prism-url` attributes are removed in zero-md V2. To use custom URLs for these libraries, load their respective script tags in the `<head>` before importing `zero-md`. This ensures that the libraries are available when `zero-md` initializes. ```html <head> ... <script defer src="/lib/marked.js"></script> <script defer src="/lib/prism.js"></script> <script type="module" src="/lib/zero-md.min.js"></script> </head> ``` -------------------------------- ### Create Mermaid Diagrams in Markdown Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This example shows how to create diagrams using the Mermaid syntax within a fenced code block with the language specified as `mermaid`. Zero-md supports rendering these diagrams directly within the Markdown content. ```markdown ```mermaid sequenceDiagram Foo->>Bar:I ate like a pig. Bar->>Foo:Foo, you ARE a pig. ``` ``` -------------------------------- ### Google Analytics Configuration (JavaScript) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v1/demo/index.html This snippet configures Google Analytics by initializing the dataLayer and setting the tracking configuration. It's a standard setup for integrating Google Analytics into a web page. ```javascript window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) } gtag('js', new Date()) gtag('config', 'UA-66946548-3') ``` -------------------------------- ### Specify Custom URLs for Marked and Prism Libraries Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/advanced-usage.md This example shows how to load Marked.js and Prism.js from custom URLs instead of their default CDNs. This is useful if you host these libraries locally or use a different CDN. The custom scripts should be loaded before the <zero-md> script. ```html <head> <!-- Optionally load marked from your own URL first --> <script defer src="/node_modules/marked/marked.min.js"></script> <!-- Or prismjs from your own URL --> <script defer src="/node_modules/prismjs/prism.js"></script> <!-- Then load <zero-md> --> <script type="module" src="/node_modules/zero-md/dist/zero-md.min.js"></script> </head> ``` -------------------------------- ### Zero-MD with Custom Stylesheets via Link Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/basic-usage.md This example shows how to load external CSS files for styling zero-md. By using `<link rel="stylesheet">` tags within the `<template>`, custom markdown and highlighting stylesheets can be applied. ```html <zero-md src="https://example.com/markdown.md"> <template> <link rel="stylesheet" href="markdown-styles.css" /> <link rel="stylesheet" href="highlight-styles.css" /> </template> </zero-md> ``` -------------------------------- ### Install zero-md via CDN and Use in HTML Source: https://github.com/zerodevx/zero-md/blob/main/README.md This snippet shows how to include the zero-md web component in an HTML file by importing it from a CDN. It automatically registers the component, allowing you to use the `<zero-md>` tag directly in your body to display markdown files. ```html <head> ... <!-- Import element definition and auto-register --> <script type="module" src="https://cdn.jsdelivr.net/npm/zero-md@3?register"></script> </head> <body> ... <!-- Profit! --> <zero-md src="example.md"></zero-md> </body> ``` -------------------------------- ### Add Copy-to-Clipboard Button with zero-md and Prism.js Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/recipes.md This recipe enables a 'Copy' button for code blocks in zero-md by leveraging Prism.js's `toolbar` and `copy-to-clipboard` plugins. It configures global settings for zero-md, specifying the URLs for Prism core, autoloader, toolbar, and copy-to-clipboard plugins, as well as the necessary CSS files. The setup ensures that these plugins are loaded and active when zero-md renders. ```html <head> <script> // Make use of global config object to change default options window.ZeroMdConfig = { prismUrl: [ // Default Prism URLs ['https://cdn.jsdelivr.net/gh/PrismJS/prism@1/prism.min.js', 'data-manual'], 'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/autoloader/prism-autoloader.min.js', // Also load Prism's `toolbar` and `copy-to-clipboard` plugins 'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/toolbar/prism-toolbar.min.js', 'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js' ], cssUrls: [ // Default stylesheets 'https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css', 'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css', // Include CSS for `toolbar` plugin 'https://cdn.jsdelivr.net/gh/PrismJS/prism@1/plugins/toolbar/prism-toolbar.min.css' ] } </script> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> </head> <body> <zero-md src="fixture.md"></zero-md> </body> ``` -------------------------------- ### Python Program to Add Two Numbers Source: https://github.com/zerodevx/zero-md/blob/main/src/fixtures/feat.html A Python script that adds two floating-point numbers and prints the result. It demonstrates basic arithmetic operations and string formatting in Python. ```python # This program adds two numbers num1 = 1.5 num2 = 6.3 # Add two numbers sum = num1 + num2 # Display the sum print('The sum of {0} and {1} is {2}'.format(num1, num2, sum)) ``` -------------------------------- ### Zero-MD with Inline Markdown Fallback Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/basic-usage.md This comprehensive example showcases zero-md's ability to load markdown from 'src' and fallback to inline markdown provided in a `<script type="text/markdown">` tag if 'src' is unavailable or empty. It also includes custom styling. ```html <zero-md src="https://example.com/markdown.md"> <template> <link rel="stylesheet" href="markdown-styles.css" /> <style> h1 { color: red; } </style> <link rel="stylesheet" href="highlight-styles.css" /> <style> code { background: yellow; } </style> </template> <script type="text/markdown"> This is the fall-back markdown that will **only show** when `src` is falsy. </script> </zero-md> ``` -------------------------------- ### Zero-md Render Function with Options Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/attributes-and-helpers.md This JavaScript example demonstrates how to programmatically render markdown content in a zero-md component using the `render()` function. It shows how to dynamically set the 'src' attribute and pass options to `render()`, including an array of CSS classes to apply and custom Marked.js options for markdown transformation. ```js const app = document.querySelector('zero-md') const run = async () => { app.src = 'dynamic.md' await app.render({ classes: 'line-numbers', gfm: false, mangle: false }) alert('Render complete!') } run() ``` -------------------------------- ### Combine Stylesheets and Inline Styles in HTML Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This example illustrates how to combine multiple external stylesheets and inline style blocks within a single `<template>` for the zero-md component. It also shows how to include fallback Markdown content using a `<script type="text/markdown">` tag, which is used when the `src` attribute is not provided. ```html <zero-md src="https://example.com/markdown.md"> <template> <link rel="stylesheet" href="markdown-styles.css" /> <style> h1 { color: red; } </style> <link rel="stylesheet" href="highlight-styles.css" /> <style> code { background: yellow; } </style> </template> <script type="text/markdown"> This is the fall-back markdown that will **only show** when `src` is falsy. </script> </zero-md> <style> zero-md { display: block; position: relative; } </style> ``` -------------------------------- ### Render Inline Markdown with Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/basic-usage.md This example shows how to render markdown directly within the zero-md component without using the 'src' attribute. Markdown content is placed inside a `<script type="text/markdown">` tag. ```html <zero-md> <script type="text/markdown"> # **This** is my [markdown](https://example.com) </script> </zero-md> ``` -------------------------------- ### New CDN URL for zero-md v3 Source: https://github.com/zerodevx/zero-md/blob/main/docs/migration.md This code snippet shows the new CDN URL for zero-md version 3. The '?register' query parameter is used to automatically register the custom element in the CustomElementRegistry. This is a change from previous versions where registration might have been handled differently. ```text https://cdn.jsdelivr.net/npm/zero-md@3?register ``` -------------------------------- ### Set Default Attributes Globally for Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/advanced-usage.md Configure default attributes for all zero-md elements by setting them within the load() method of a custom ZeroMd element. This example disables auto-rendering and shadow DOM. ```html <script type="module"> import ZeroMd from 'https://cdn.jsdelivr.net/npm/zero-md@3' customElements.define('zero-md', class extends ZeroMd { async load() { await super.load() this.setAttribute('no-auto', '') // disable auto-render for all instances this.setAttribute('no-shadow', '') // don't use shadow dom } }) </script> ``` -------------------------------- ### JavaScript Zero-MD Dynamic Source and Attribute Tests Source: https://github.com/zerodevx/zero-md/blob/main/src/index.html These code examples demonstrate how to dynamically change the `src` attribute of a zero-md element and how to add or remove it entirely. This is used to test fallback content loading and handling of empty or missing sources. ```javascript const dynamicEl = document.createElement('zero-md'); dynamicEl.src = 'fixtures/basic.md'; clicked('resetBtn', () => get('basic').setAttribute('src', 'fixtures/basic.md')); clicked('removeBtn', () => get('basic').removeAttribute('src')); clicked('emptyBtn', () => get('basic').setAttribute('src', '')); ``` -------------------------------- ### Dedent Inline Markdown with Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/advanced-usage.md This example shows how to enable the dedent function for inline markdown within <zero-md>. By adding the `data-dedent` attribute to the `<script type="text/markdown">` tag, leading whitespace is removed, preventing it from being misinterpreted as a code block by the markdown parser. ```html <zero-md> <!-- Set `data-dedent` to remove indentation --> <script type="text/markdown" data-dedent> # Opt in to apply dedent function If **indentation** is important to you. </script> </zero-md> ``` -------------------------------- ### JavaScript DOM Manipulation for Zero-MD Tests Source: https://github.com/zerodevx/zero-md/blob/main/src/index.html This snippet defines helper functions to interact with DOM elements in tests. `get` selects an element by its `data-testid` attribute, and `clicked` attaches a click event listener to a specified element. It's used to simulate user interactions with the zero-md component. ```javascript const get = (id) => document.querySelector(`[data-testid="${id}"]`); const clicked = (id, fn) => get(id).addEventListener('click', fn); ``` -------------------------------- ### Replace XMP Tag with Script Tag in Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/migration-guide.md In zero-md V2, the `<xmp>` tag for markdown content is deprecated. Use `<script type="text/markdown">` instead. This change simplifies the structure and directly embeds markdown content. The `data-dedent` attribute can be used to automatically remove leading whitespace from the markdown. ```html <!-- Previous --> <zero-md> <template> <xmp> # `This` is my [markdown](example.md) </xmp> </template> </zero-md> <!-- Now --> <zero-md> <!-- No need to wrap with <template> tag --> <script type="text/markdown"> # `This` is my [markdown](example.md) </script> </zero-md> <!-- If you need your code to be pretty, --> <zero-md> <!-- Set `data-dedent` to opt-in to dedent the text during render --> <script type="text/markdown" data-dedent> # It is important to be pretty So having spacing makes me happy. </script> </zero-md> ``` -------------------------------- ### Zero-MD Markdown Source Behavior Update Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/migration-guide.md The behavior of markdown sources in zero-md has changed. The `<script type="text/markdown">` tag now acts as a fallback. In V1, the content within `<template>` had higher priority than the `src` attribute. In V2, the `src` attribute takes precedence unless it resolves to a falsy value, in which case the script content is used. ```html <!-- Previous --> <zero-md src="will-not-render.md"> <template> <xmp> # This has first priority and will be rendered instead of `will-not-render.md` </xmp> </template> </zero-md> <!-- Now --> <zero-md src="will-render-unless-falsy.md"> <script type="text/markdown"> # This will NOT be rendered _unless_ `src` resolves to falsy </script> <zero-md></zero-md> </zero-md> ``` -------------------------------- ### Zero-md Style Template with Append Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/attributes-and-helpers.md This example demonstrates how to use a style template within a zero-md component to append custom styles. It includes both external stylesheets via <link> and inline <style> tags. The 'data-merge="append"' attribute ensures these styles are added after the default styles. ```html <zero-md> <template data-merge="append"> <link rel="stylesheet" href="custom.css" /> <style> h1 { color: red; } </style> </template> </zero-md> ``` -------------------------------- ### Rename ZeroMd Config Object to ZeroMdConfig Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/migration-guide.md The global configuration object for zero-md has been renamed from `ZeroMd.config` (V1) to `ZeroMdConfig` (V2). This change affects how global settings like `cssUrls` are applied. Ensure you use the new `ZeroMdConfig` object when configuring zero-md globally. ```html <!-- Previous --> <script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script> <script> window.ZeroMd = { config: { cssUrls: ['/styles/my-markdown-theme.css', '/styles/my-highlight-theme.css'] } } </script> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js" ></script> <!-- Now --> <script> window.ZeroMdConfig = { cssUrls: ['/styles/my-markdown-theme.css', '/styles/my-highlight-theme.css'] } </script> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> ``` -------------------------------- ### Replace CSS URLs Attribute with Link Tag in Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/migration-guide.md The `css-urls` attribute in zero-md is deprecated. Use standard HTML `<link rel="stylesheet">` tags within a `<template>` element to include external stylesheets. This allows for more control over styling, including merging or overriding default styles. ```html <!-- Previous --> <zero-md src="example.md" css-urls='["/style1.css", "/style2.css"]'> <!-- Now, this... --> <zero-md src="example.md"></zero-md> <!-- ...is actually equivalent to this --> <zero-md src="example.md"> <template> <!-- These are the default stylesheets --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css" /> </template> </zero-md> <!-- So, to apply your own external stylesheets... --> <zero-md src="example.md"> <!-- ...you overwrite the default template --> <template> <!-- Use <link> tags to reference your own stylesheets --> <link rel="stylesheet" href="/style1.css" /> <link rel="stylesheet" href="/style2.css" /> <!-- You can even apply additional styles --> <style> p { color: red; } </style> </template> </zero-md> <!-- If you like the default stylesheets but wish to apply some overrides --> <zero-md src="example.md"> <!-- Set `data-merge` to "append" to apply this template AFTER the default template --> <!-- Or "prepend" to apply this template BEFORE --> <template data-merge="append"> <style> p { color: red; } </style> </template> </zero-md> ``` -------------------------------- ### Load zero-md via CDN Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/installation.md This snippet demonstrates how to include the zero-md component in an HTML file using a Content Delivery Network (CDN). It requires adding a script tag to the head and then using the custom element in the body. This method is recommended for ease of use and zero configuration. ```html <head> ... <!-- Import element definition --> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> ... </head> <body> ... <!-- Profit! --> <zero-md src="/example.md"></zero-md> ... </body> ``` -------------------------------- ### Loading Marked and Prism Libraries Before zero-md (HTML) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/configuration.md This HTML demonstrates the recommended approach to override default CDN locations for Marked and Prism libraries. By loading the library scripts yourself using `<script defer>` before including the zero-md script, you ensure your specified versions are used. ```html <head> <!-- Load Marked and Prism yourself --> <script defer src="/lib/marked.js"></script> <script defer src="/lib/prism.js"></script> <!-- Then load `<zero-md>` --> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> </head> ``` -------------------------------- ### The `load()` Function for Extensibility Source: https://github.com/zerodevx/zero-md/blob/main/docs/advanced-usage.md A function called once during element creation, intended for setting up default values and extending functionality. ```APIDOC ## The `load()` Function ### Description Extensibility in `<zero-md>` is designed to follow the Custom Elements V1 spec. The `load()` function is a special method called once per element instance, similar to the constructor. It's the recommended place for setting initial default values or preparing the component for extended functionality. ### Method `load()` (within a subclass of `ZeroMd`) ### Endpoint N/A (Method within a custom element class) ### Parameters N/A ### Request Example ```javascript import {ZeroMd} from 'zero-md'; class CustomZeroMd extends ZeroMd { constructor() { super(); // Constructor logic if needed } load() { super.load(); // Important: Call super.load() first // Set default values or initialize extended features here this.defaultConfig = { theme: 'dark' }; console.log('CustomZeroMd loaded with defaults:', this.defaultConfig); } } customElements.define('custom-zero-md', CustomZeroMd); ``` ### Response N/A ``` -------------------------------- ### Configure Async Loaders for Zero-MD Dependencies Source: https://github.com/zerodevx/zero-md/blob/main/docs/advanced-usage.md Manage asynchronous loading of libraries like marked or highlight.js for zero-md. This allows for custom CDN hosts or self-hosting by passing loader functions to the super.load() method. ```javascript const lib = () => import('/path/to/lib') import ZeroMd from 'zero-md' import { Marked } from 'marked' customElements.define('zero-md', class extends ZeroMd { async load() { await super.load({ marked: () => new Marked(), // self-hosted hljs: () => import('path/to/lib'), // change CDN url ... }) } }) ``` -------------------------------- ### Default zero-md Styling Template Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This HTML snippet shows the default template used by zero-md, which includes essential stylesheets for markdown rendering, syntax highlighting, and math support. It links to GitHub-flavored markdown CSS, highlight.js themes (both light and dark), and KaTeX styles. ```html <zero-md src="https://example.com/markdown.md"> <template> <!-- Sensible host style defaults --> <style> :host { display: block; position: relative; contain: content; } :host([hidden]) { display: none; } </style> <!-- Github markdown styles (light/dark) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@5/github-markdown.min.css" /> <!-- Highlightjs Github theme (light) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github.min.css" /> <!-- Highlightjs Github theme (prefers dark) --> <link rel="stylesheet" media="(prefers-color-scheme:dark)" href="https://cdn.jsdelivr.net/npm/@highlightjs/cdn-assets@11/styles/github-dark.min.css" /> <!-- KaTeX styles (needed for math) --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0/dist/katex.min.css" /> </template> </zero-md> ``` -------------------------------- ### Python Script for Data Processing Source: https://github.com/zerodevx/zero-md/blob/main/docs/v1/demo/example.md This Python code snippet demonstrates conditional logic and function calls for data manipulation. It appears to be part of a larger script dealing with system configurations or data processing, possibly involving network or security-related operations. Dependencies are not explicitly stated but implied by function and variable names. ```python supercomputerPpi = page.word(1); pretestRam(onlySector, zoneJfsDdl(header)); if (export > soft_ssl_zif) { rosetta.tweetRwUsername += multimedia_wireless + piconet_menu_dcim(5, backlinkBitrateSafe, ppga); metal_virus = printer_add; } else { delDegaussBoot(cdStandaloneInstall + processor_dvd, dynamic_sms - copyright); baseExploitSource.mediaApp(iso_model(boolean), indexByteLinkedin * display); } ``` -------------------------------- ### Display Markdown from External File Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This HTML snippet showcases the primary usage of the zero-md component. By simply setting the `src` attribute on the `<zero-md>` tag to the URL of a markdown file, the component will load and render its content. ```html <!-- Simply set the `src` attribute and win --> <zero-md src="https://example.com/markdown.md"></zero-md> ``` -------------------------------- ### Render Math Equations using a Math Code Block Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This snippet illustrates rendering mathematical equations within a fenced code block specifying the language as `math`. This method is useful for clearly delineating mathematical content within the Markdown, and it is rendered by KaTeX. ```markdown ```math \sqrt{3x-1}+(1+x)^2 ``` ``` -------------------------------- ### Zero-MD Dynamic Styling (JavaScript) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v1/demo/index.html This JavaScript code demonstrates how to dynamically apply different markdown and code highlighting CSS styles to a Zero-MD instance. It fetches style URLs from predefined lists based on user selections and updates the component's attributes to re-render. ```javascript document.querySelector('#demo1_btn').addEventListener('click', function () { var el = document.querySelector('#demo1') var mList = [ 'https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/2.10.0/github-markdown.min.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/avenir-white.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/foghorn.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/swiss.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/markdown1.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/markdown4.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/markdown7.css', 'https://raw.githubusercontent.com/jasonm23/markdown-css-themes/gh-pages/markdown10.css' ] var hList = [ 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.11.0/themes/prism.min.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-atom-dark.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-duotone-dark.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-duotone-earth.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-duotone-forest.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-duotone-light.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-duotone-sea.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-duotone-space.css', 'https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-xonokai.css' ] var ms = document.querySelector('#demo1_ms') var hs = document.querySelector('#demo1_hs') var cssList = [mList[parseInt(ms.value)], hList[parseInt(hs.value)]] el.setAttribute('css-urls', JSON.stringify(cssList)) el.render() }) ``` -------------------------------- ### JavaScript: Async Render Function for Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/attributes-and-helpers.md The `render()` function asynchronously initializes the component, builds markdown HTML in parallel, stamps styles and body into the DOM, and fires a 'zero-md-rendered' event. It relies on internal helper functions like `waitForReady`, `buildMd`, and `stampBody`. ```javascript async function render(opts = {}) { // Ensure everything is initialised await this.waitForReady() // Start generating markdown HTML string in parallel const pending = this.buildMd(opts) // Insert or replace styles into DOM const styles = await this.stampStyles(this.buildStyles()) await this.tick() // Insert or replace body into DOM const body = await this.stampBody(await pending, opts.classes) // Finally, fire the rendered event this.fire('zero-md-rendered', { stamped: { styles, body } }) } ``` -------------------------------- ### Run Tests with Playwright Source: https://github.com/zerodevx/zero-md/blob/main/README.md This command executes the test suite for zero-md using Playwright. It's crucial for ensuring the library's stability and functionality. Test specifications are located in `src/index.spec.js` and should pass before submitting any changes. ```bash $ npm test ``` -------------------------------- ### Integrate AnchorJS with zero-md (HTML, JavaScript) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/recipes.md This snippet demonstrates how to set up zero-md to work with AnchorJS. It includes loading both zero-md and AnchorJS, and an event listener to initialize anchors after zero-md has rendered the content. Requires 'no-shadow' attribute on zero-md. ```html <!doctype html> <html> <head> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> <script type="module"> import 'https://cdn.jsdelivr.net/npm/anchor-js/anchor.min.js' document.addEventListener('zero-md-rendered', function (event) { anchors.add() }) </script> </head> <body> <zero-md src="anchorjs.md" no-shadow> <template> <style> .anchorjs-link { text-decoration: none; } </style> </template> </zero-md> </body> </html> ``` -------------------------------- ### Apply KaTeX Options Globally in Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/advanced-usage.md Configure KaTeX rendering options, such as custom macros, for zero-md by passing a 'katexOptions' object with the desired settings to the super.load() method. ```html <script type="module"> import ZeroMd from 'https://cdn.jsdelivr.net/npm/zero-md@3' customElements.define('zero-md', class extends ZeroMd { async load() { await super.load({ katexOptions: { macros: { N: '{\mathbb{N}}', Z: '\mathbb{Z}', Q: '\mathbb{Q}', R: '\mathbb{R}' } } }) } }) </script> ``` -------------------------------- ### Load Legacy Build of Zero-MD for Older Browsers Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/advanced-usage.md This snippet demonstrates how to load the legacy build of <zero-md> to support older browsers. It utilizes webcomponents-loader.min.js to feature-detect and load polyfills only when necessary, followed by the legacy build of <zero-md>. ```html <head> <!-- Lightweight client-side loader that feature-detects and load polyfills only when necessary --> <script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script> <!-- Load the legacy (transpiled) build of <zero-md> --> <script defer src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.legacy.min.js" ></script> </head> ``` -------------------------------- ### Default Style Template Structure (HTML) Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/configuration.md This HTML represents the semantic equivalent of a basic `<zero-md>` tag with a `src` attribute. It shows how the default `<template>` includes styles for the host element and links to external CSS files for markdown and prism syntax highlighting. ```html <zero-md src="example.md"> <template> <style> :host { display: block; position: relative; contain: content; } :host([hidden]) { display: none; } </style> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sindresorhus/github-markdown-css@4/github-markdown.min.css" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/PrismJS/prism@1/themes/prism.min.css" /> </template> </zero-md> ``` -------------------------------- ### Display Markdown Inline Source: https://github.com/zerodevx/zero-md/blob/main/docs/getting-started.md This HTML snippet illustrates how to render markdown content directly within the zero-md component. Markdown is placed inside a `<script type="text/markdown">` tag. If the `src` attribute is not provided or invalid, zero-md will fall back to rendering this inline content. ```html <!-- Don't set the `src` attribute --> <zero-md> <!-- Write your markdown inside a `<script type="text/markdown">` tag --> <script type="text/markdown"> # **This** is my [markdown](https://example.com) </script> </zero-md> ``` -------------------------------- ### Customize zero-md Globals in Web Projects Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/configuration.md This JavaScript snippet shows how to extend the `ZeroMd` class to create a custom element with specific global configurations, such as custom URLs for marked.js and prism.js, alternative CSS stylesheets, and host CSS. It then registers this custom element globally. This approach is suitable for web projects using bundlers. ```javascript import ZeroMd from 'zero-md' // Define a new custom class class ZeroMdCustom extends ZeroMd { constructor() { // Call `super()` with new configs super({ markedUrl: '/lib/marked.js', prismUrl: '/lib/prism.js', cssUrls: ['/styles/markdown.css', '/styles/highlight.css'], hostCss: ':host{display:inline-block;}' }) } } // Register the element with custom class customElements.define('zero-md', ZeroMdCustom) ``` -------------------------------- ### Zero-MD with Mixed Custom Styles and Stylesheets Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/basic-usage.md This snippet demonstrates how to combine inline styles and external stylesheets within the `<template>` for comprehensive customization of zero-md's appearance. The load order of the CSS is respected. ```html <zero-md src="https://example.com/markdown.md"> <template> <link rel="stylesheet" href="markdown-styles.css" /> <style> h1 { color: red; } </style> <link rel="stylesheet" href="highlight-styles.css" /> <style> code { background: yellow; } </style> </template> </zero-md> ``` -------------------------------- ### Display External Markdown File with Zero-MD Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/basic-usage.md This snippet shows the most basic way to use the zero-md component. By setting the 'src' attribute to a URL, the component will fetch and render the markdown content with default styling. ```html <zero-md src="https://example.com/markdown.md"></zero-md> ``` -------------------------------- ### Integrate Google Analytics gtag.js (JavaScript) Source: https://github.com/zerodevx/zero-md/blob/main/docs/index.html This JavaScript code snippet configures and loads the Google Analytics gtag.js script for the website. It initializes the dataLayer and sets up the gtag function to send tracking information. The script is only loaded if the hostname is not 'localhost', ensuring analytics are only collected in production environments. Dependencies include the browser's document object model and Google's gtag.js script. ```javascript if (location.hostname !== 'localhost') { window.dataLayer = window.dataLayer || [] function gtag() { dataLayer.push(arguments) } gtag('js', new Date()) gtag('config', 'G-LJS2EY950X') const el = document.createElement('script') el.src = 'https://www.googletagmanager.com/gtag/js?id=G-LJS2EY950X' el.async = true document.head.append(el) } ``` -------------------------------- ### Support Mermaid Diagrams with zero-md Source: https://github.com/zerodevx/zero-md/blob/main/docs/v2/recipes.md This recipe shows how to render Mermaid diagrams within zero-md by loading the Mermaid.js library and customizing the Markdown renderer. It requires including Mermaid's script in the head and using a custom renderer to wrap Mermaid code blocks. The output will be HTML elements ready for Mermaid to process. ```html <head> ... <!-- Load mermaid --> <script defer src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script> <script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@2/dist/zero-md.min.js" ></script> </head> <body> <!-- Render zero-md in light dom --> <zero-md id="app" src="mermaid.md" no-shadow manual-render></zero-md> <script> app.addEventListener('zero-md-ready', async () => { // Create custom marked renderer const renderer = new marked.Renderer() renderer.code = function (code, lang) { return lang === 'mermaid' ? `<div class="mermaid">${code}</div>` : `<pre><code>${code}</code></pre>` } await app.render({ renderer }) mermaid.init() }) </script> </body> ```