### Development Setup with Bun Source: https://unifiedjs.com/explore/package/rehype-code-titles Clone the repository, install dependencies using Bun, and run development commands like testing, linting, and building. ```bash git clone https://github.com/rockchalkwushock/rehype-code-titles.git cd rehype-code-titles bun install # Do cool stuff with code bun test # Run tests bun run lint # Run linter bun run build # Build the package git add . git commit -m "feat(src): a cool new feature" git push ``` -------------------------------- ### Unified Pipeline Setup Source: https://unifiedjs.com/explore/package/remark-ruby Example of setting up a unified processing pipeline with remark-parse and remark-ruby. This demonstrates how to integrate the plugin into a typical Markdown transformation process. ```javascript const unified = require('unified') const remarkParse = require('remark-parse') const remarkRuby = require('remark-ruby') const stringify = require('rehype-stringify') const remark2rehype = require('remark-rehype') unified() .use(remarkParse) .use(remarkRuby) .use(remark2rehype) .use(stringify) ``` -------------------------------- ### Create a CLI for remark with unified-args Source: https://unifiedjs.com/explore/package/unified-args This example demonstrates how to create a CLI for remark using unified-args. It configures the CLI to search for markdown files, load configurations from `.remarkrc` and `package.json`, and ignore files specified in `.remarkignore`. This setup is useful for building custom markdown processing tools. ```javascript import {remark} from 'remark' import {args} from 'unified-args' args({ description: 'Command line interface to inspect and change markdown files with remark', extensions: [ 'md', 'markdown', 'mdown', 'mkdn', 'mkd', 'mdwn', 'mkdown', 'ron' ], ignoreName: '.remarkignore', name: 'remark', packageField: 'remarkConfig', pluginPrefix: 'remark', processor: remark, rcName: '.remarkrc', version: '11.0.0' }) ``` -------------------------------- ### Usage Example with unified processor Source: https://unifiedjs.com/explore/package/remark-supersub Demonstrates how to integrate remark-supersub into a unified processor pipeline. This setup includes parsing Markdown, applying the supersub plugin, converting to HTML, and stringifying the HTML. ```javascript import { unified } from 'unified' import markdown from 'remark-parse' import html from 'rehype-stringify' import remark2rehype from 'remark-rehype' import supersub from 'remark-supersub' unified() .use(markdown) .use(supersub) .use(remark2rehype) .use(html) ``` -------------------------------- ### Install unist-util-to-list-of-char Source: https://unifiedjs.com/explore/package/unist-util-to-list-of-char Install the package using npm. ```bash npm install unist-util-to-list-of-char ``` -------------------------------- ### Install unified-doc-react Source: https://unifiedjs.com/explore/package/unified-doc-react Install the unified-doc-react package using npm. ```bash npm install unified-doc-react ``` -------------------------------- ### Install unified-doc-search-micromatch Source: https://unifiedjs.com/explore/package/unified-doc-search-micromatch Install the package using npm. ```bash npm install unified-doc-search-micromatch ``` -------------------------------- ### Install remark-join-cjk-lines with npm or yarn Source: https://unifiedjs.com/explore/package/remark-join-cjk-lines Install the package using either npm or yarn. No additional setup is required for installation. ```bash npm install remark-join-cjk-lines # or yarn add remark-join-cjk-lines ``` -------------------------------- ### Install unified-doc Source: https://unifiedjs.com/explore/package/unified-doc Install the unified-doc package using npm. ```bash npm install unified-doc ``` -------------------------------- ### Install unified-doc-util-mark Source: https://unifiedjs.com/explore/package/unified-doc-util-mark Install the package using npm. ```bash npm install unified-doc-util-mark ``` -------------------------------- ### Install remark-description-list Source: https://unifiedjs.com/explore/package/remark-description-list Install the remark-description-list package using npm. ```bash npm i remark-description-list ``` -------------------------------- ### Install unist-util-to-string-with-nodes Source: https://unifiedjs.com/explore/package/unist-util-to-string-with-nodes Install the package using npm. ```bash npm install unist-util-to-string-with-nodes ``` -------------------------------- ### Install monaco-unified Source: https://unifiedjs.com/explore/package/monaco-unified Install the monaco-unified package using npm. ```bash npm install monaco-unified ``` -------------------------------- ### Install unified-doc-util-text-offsets Source: https://unifiedjs.com/explore/package/unified-doc-util-text-offsets Install the package using npm. ```bash npm install unified-doc-util-text-offsets ``` -------------------------------- ### Install remark-mermaid Source: https://unifiedjs.com/explore/package/remark-mermaid Install the remark-mermaid plugin and mermaid.cli using npm. ```bash $ npm install remark-mermaid mermaid.cli ``` -------------------------------- ### Install remark-lint-match-punctuation Source: https://unifiedjs.com/explore/package/remark-lint-match-punctuation Install the package using npm. ```bash npm install remark-lint-match-punctuation ``` -------------------------------- ### Install remark-autolink-references Source: https://unifiedjs.com/explore/package/remark-autolink-references Install the package using npm. ```bash npm install remark-autolink-references ``` -------------------------------- ### Install remark-lint-code-block-syntax Source: https://unifiedjs.com/explore/package/remark-lint-code-block-syntax Install the package using npm. ```bash npm install remark-lint-code-block-syntax ``` -------------------------------- ### Install gridsome-plugin-remark-prismjs-all Source: https://unifiedjs.com/explore/package/gridsome-plugin-remark-prismjs-all Install the plugin using npm. ```bash npm i gridsome-plugin-remark-prismjs-all ``` -------------------------------- ### Install unist-util-ancestor Source: https://unifiedjs.com/explore/package/unist-util-ancestor Install the package using npm. ```bash npm install unist-util-ancestor ``` -------------------------------- ### Travis CI configuration example Source: https://unifiedjs.com/explore/package/unified-diff An example snippet for a .travis.yml file, showing how to include a script that runs the Node.js example processing, which utilizes the unified-diff plugin. ```yaml # … script: - npm test - node example.js # … ``` -------------------------------- ### Install unified-doc-dom Source: https://unifiedjs.com/explore/package/unified-doc-dom Install the unified-doc-dom package using npm. ```bash npm install unified-doc-dom ``` -------------------------------- ### Install remark-readme Source: https://unifiedjs.com/explore/package/%40form8ion/remark-readme Install the remark-readme package using npm. ```bash $ npm install @form8ion/remark-readme --save ``` -------------------------------- ### Install mdast-util-arbitrary Source: https://unifiedjs.com/explore/package/mdast-util-arbitrary Install the package as a development dependency. ```bash npm install --save-dev mdast-util-arbitrary ``` -------------------------------- ### Install remark-render Source: https://unifiedjs.com/explore/package/remark-render Install the remark-render package using npm. ```bash npm install remark-render ``` -------------------------------- ### Install remark-lint-no-long-code Source: https://unifiedjs.com/explore/package/remark-lint-no-long-code Install the plugin using npm. ```bash npm install remark-lint-no-long-code ``` -------------------------------- ### Example: Warning for file name starting with 'a' Source: https://unifiedjs.com/explore/package/remark-lint-no-file-name-articles This example demonstrates the warning message generated when a file name starts with 'a'. The message indicates the unexpected article and suggests its removal. ```markdown ##### `a-title.md` ###### Out ``` 1:1: Unexpected file name starting with `a`, remove it ``` ``` -------------------------------- ### Install unist-util-visit-children with npm Source: https://unifiedjs.com/explore/package/unist-util-visit-children Install the package for use in Node.js environments. ```bash npm install unist-util-visit-children ``` -------------------------------- ### Installation Source: https://unifiedjs.com/explore/package/remark-attr Standard npm command to install the remark-attr package. ```bash npm install remark-attr ``` -------------------------------- ### Doc Instance Configuration Example Source: https://unifiedjs.com/explore/package/unified-doc Demonstrates how to configure a Doc instance with custom compilers, marks, parsers, plugins, and sanitization settings. ```javascript const doc = Doc({ content: '> **some** markdown content', filename: 'doc.md', compiler: [ // attach a custom compiler for custom content rendering [customCompiler, customCompilerOptions], ], marks: [ // content will be marked in appropriate places { id: 'a', start: 0, end: 4, classNames: ['class-a']}, { id: 'b', start: 0, end: 4, style: { background: 'red', color: 'white' } }, ], parsers: { 'text/html': [parser1, parser2, parser3], // overwrite html parser with a custom multi-step parser 'application/pdf': [pdfParser], // a unified pdf parser is in high demand! }, postPlugins: [ // apply custom rehype plugins (post content processing) [toc, tocOptions], ], prePlugins: [ // apply custom rehype plugins (pre content processing) [highlight, { ignoreMissing: true }], ], sanitizeSchema: { // custom sanitization rules attributes: { '*': ['style'] } }, searchAlgorithm: customSearchAlgorithm, // attach a custom search algorithm relevant to your needs (e.g. elasticsearch, googlesearch etc) searchOptions: { // unified search option behavior minQueryLength: 5, snippetOffsetPadding: 10, }, }); ``` -------------------------------- ### Example: Warning for file name starting with 'an' Source: https://unifiedjs.com/explore/package/remark-lint-no-file-name-articles This example illustrates the warning produced when a file name starts with 'an'. The message is specific to the article found and advises its removal. ```markdown ##### `an-article.md` ###### Out ``` 1:1: Unexpected file name starting with `an`, remove it ``` ``` -------------------------------- ### Install remark-openapi Source: https://unifiedjs.com/explore/package/remark-openapi Install the remark-openapi package using npm. ```bash $ npm install remark-openapi ``` -------------------------------- ### Example with tilde markers (configured for tilde) Source: https://unifiedjs.com/explore/package/remark-lint-fenced-code-marker Demonstrates correct usage when the rule is configured to expect tilde markers. ```markdown When configured with '~'`. ###### In ``` ~~~javascript mercury() ~~~ ~~~ venus() ~~~ ``` ``` -------------------------------- ### Example: No messages for a valid file name Source: https://unifiedjs.com/explore/package/remark-lint-no-file-name-articles This example shows the expected output when a file name does not start with an article. No messages are generated. ```markdown ##### `title.md` ###### Out No messages. ``` -------------------------------- ### Example: Valid blockquote with markers (ok.md) Source: https://unifiedjs.com/explore/package/remark-lint-no-blockquote-without-marker This example shows a correctly formatted blockquote where each line starts with the `>` marker. No messages are expected. ```markdown > Mercury, > Venus, > and Earth. Mars. ``` -------------------------------- ### Unified CLI Usage Example Source: https://unifiedjs.com/explore/package/unified-args Demonstrates the general usage and available options for a Unified CLI tool like remark. ```bash Usage: remark [options] [path | glob ...] Command line interface to inspect and change markdown files with remark Options: --[no-]color specify color in report (on by default) --[no-]config search for configuration files (on by default) -e --ext specify extensions --file-path specify path to process as -f --frail exit with 1 on warnings -h --help output usage information --[no-]ignore search for ignore files (on by default) -i --ignore-path specify ignore file --ignore-path-resolve-from cwd|dir resolve patterns in `ignore-path` from its directory or cwd --ignore-pattern specify ignore patterns --inspect output formatted syntax tree -o --output [path] specify output location -q --quiet output only warnings and errors -r --rc-path specify configuration file --report specify reporter -s --setting specify settings -S --silent output only errors --silently-ignore do not fail when given ignored files --[no-]stdout specify writing to stdout (on by default) -t --tree specify input and output as syntax tree --tree-in specify input as syntax tree --tree-out output syntax tree -u --use use plugins --verbose report extra info for messages -v --version output version number -w --watch watch for changes and reprocess Examples: # Process `input.md` $ remark input.md -o output.md # Pipe $ remark < input.md > output.md # Rewrite all applicable files $ remark . -o ``` -------------------------------- ### Install remark-telegraph Source: https://unifiedjs.com/explore/package/remark-telegraph Install the remark-telegraph library using npm. ```bash npm i --save remark-telegraph ``` -------------------------------- ### Usage Example with remark-embedder Source: https://unifiedjs.com/explore/package/%40remark-embedder/transformer-codesandbox Integrate the CodeSandbox transformer with remark-embedder to process markdown containing CodeSandbox links. This example demonstrates the setup and execution. ```javascript import remarkEmbedder from '@remark-embedder/core' import CodeSandboxTransformer from '@remark-embedder/transformer-codesandbox' // or, if you're using CommonJS require: // const {default: CodeSandboxTransformer} = require('@remark-embedder/transformer-codesandbox') import remark from 'remark' import html from 'remark-html' const exampleMarkdown = "\nThis is a CodeSandbox:\n\nhttps://codesandbox.io/s/css-variables-vs-themeprovider-df90h\n" async function go() { const result = await remark() .use(remarkEmbedder, { transformers: [CodeSandboxTransformer], }) .use(html) .process(exampleMarkdown) console.log(result.toString()) } go() ``` -------------------------------- ### Load Plugins with --use Source: https://unifiedjs.com/explore/package/unified-args Load plugins by name or path, with optional settings. Plugins can be prefixed for preference. Aliased as -u. ```bash cli --use remark-man input.txt cli --use man input.txt cli --use 'toc=max-depth:3' input.txt cli --use ./plugin.js input.txt ``` -------------------------------- ### Install remark-graphviz Source: https://unifiedjs.com/explore/package/remark-graphviz Install the remark-graphviz package using npm. ```bash $ npm install remark-graphviz ``` -------------------------------- ### Example: Warning for file name starting with 'the' Source: https://unifiedjs.com/explore/package/remark-lint-no-file-name-articles This example shows the warning message for a file name beginning with 'the'. The output clearly states the issue and the recommended action. ```markdown ##### `the-title.md` ###### Out ``` 1:1: Unexpected file name starting with `the`, remove it ``` ``` -------------------------------- ### Install remark-preset-lint-markdown-style-guide with Deno Source: https://unifiedjs.com/explore/package/remark-preset-lint-markdown-style-guide Import the package using esm.sh for Deno. ```typescript import remarkPresetLintMarkdownStyleGuide from 'https://esm.sh/remark-preset-lint-markdown-style-guide@6' ``` -------------------------------- ### Use unist-util-position to get node positions Source: https://unifiedjs.com/explore/package/unist-util-position Import and use `position`, `pointStart`, and `pointEnd` to get positional information from a unist tree. This example uses `mdast-util-from-markdown` to create a tree. ```javascript import {fromMarkdown} from 'mdast-util-from-markdown' import {pointEnd, pointStart, position} from 'unist-util-position' const tree = fromMarkdown('# foo\n\n* bar\n') console.log(position(tree)) console.log(pointStart(tree)) console.log(pointEnd(tree)) ``` -------------------------------- ### Building the project locally Source: https://unifiedjs.com/explore/package/%40jsdevtools/rehype-inline-svg Steps to clone the repository, install dependencies, and build the project locally. ```bash git clone https://github.com/JS-DevTools/rehype-inline-svg.git npm install npm run build npm test ``` -------------------------------- ### Install remark-parse-frontmatter Source: https://unifiedjs.com/explore/package/remark-parse-frontmatter Install the remark-parse-frontmatter package using yarn. ```bash yarn add remark-parse-frontmatter ``` -------------------------------- ### Usage Example with rehype Processor Source: https://unifiedjs.com/explore/package/rehype-add-classes Demonstrates how to use rehype-add-classes with a rehype processor to add classes to HTML content. The example shows the setup of the processor and the resulting HTML after processing. ```javascript import rehype from 'rehype'; import vfile from 'to-vfile'; import addClasses from 'rehype-add-classes'; const processor = rehype() .data('settings', { fragment: true }) .use(addClasses, { pre: 'hljs', 'h1,h2,h3': 'title', h1: 'is-1', h2: 'is-2', p: 'one two' }); const html = `

header

sub 1

sub 2

`; const { contents } = processor.processSync(vfile({ contents: html })); console.log(contents); ``` ```html

header

sub 1

sub 2

``` -------------------------------- ### CLI Help Output Example Source: https://unifiedjs.com/explore/package/unified-args This is an example of the help output generated by the CLI created with unified-args. It shows the usage, description, and available options for the command-line tool. ```text Usage: remark [options] [path | glob ...] Command line interface to inspect and change markdown files with remark Options: --[no-]color specify color in report (on by default) --[no-]config search for configuration files (on by default) -e --ext specify extensions … ``` -------------------------------- ### Install remark-cli and remark-validate-links Source: https://unifiedjs.com/explore/package/remark-validate-links Install remark-cli and remark-validate-links as development dependencies. ```bash npm install remark-cli remark-validate-links --save-dev ``` -------------------------------- ### Install remark-pdf Source: https://unifiedjs.com/explore/package/remark-pdf Install the remark-pdf package using npm. ```bash npm install remark-pdf ``` -------------------------------- ### Use mdast-util-to-string to get text content Source: https://unifiedjs.com/explore/package/mdast-util-to-string Use the `toString` utility to get the plain text content of a markdown AST node. This example shows how to parse markdown and then extract its text content. ```javascript import {fromMarkdown} from 'mdast-util-from-markdown' import {toString} from 'mdast-util-to-string' const tree = fromMarkdown('Some _emphasis_, **importance**, and `code`.') console.log(toString(tree)) // => 'Some emphasis, importance, and code.' ``` -------------------------------- ### Example: File name with initial dash Source: https://unifiedjs.com/explore/package/remark-lint-no-file-name-outer-dashes Shows a file name starting with a dash, triggering a lint message. ```markdown ##### `-mercury.md` ###### Out ``` 1:1: Unexpected initial or final dashes in file name, expected dashes to join words ``` ``` -------------------------------- ### Install remark-preset-lint-markdown-style-guide in Browser Source: https://unifiedjs.com/explore/package/remark-preset-lint-markdown-style-guide Include the package in your HTML using a script tag with esm.sh for browser environments. ```html ``` -------------------------------- ### Retrieve nodes by key using Index#get Source: https://unifiedjs.com/explore/package/unist-util-index Example of retrieving nodes associated with a specific key from an existing index. ```javascript indexOnDepth.get(2) indexOnIdentifier.get('unist') ``` -------------------------------- ### Remark Processing with remark-github Source: https://unifiedjs.com/explore/package/remark-github Node.js example demonstrating how to use remark-github with remark and remark-gfm to process a Markdown file. Ensure 'to-vfile' is installed. ```javascript import {remark} from 'remark' import remarkGfm from 'remark-gfm' import remarkGithub from 'remark-github' import {read} from 'to-vfile' const file = await remark() .use(remarkGfm) .use(remarkGithub) .process(await read('example.md')) console.log(String(file)) ``` -------------------------------- ### Initialize and Use unified-doc Source: https://unifiedjs.com/explore/package/unified-doc Initialize a `doc` instance with content and filename, then use its APIs for exporting, searching, parsing, and compiling. ```javascript import Doc from 'unified-doc'; // easily initialize a `doc` instance with access to document APIs. // any supported content type benefits from the same APIs. const doc = Doc({ content: '> **some** markdown content', filename: 'doc.md', }); // export source file expect(doc.file()).toEqual({ content: '> **some** markdown content', extension: '.md', name: 'doc.md', stem: 'doc', type: 'text/markdown', }); // export file as html expect(doc.file('.html')).toEqual({ content: '
some markdown content
', extension: '.html', name: 'doc.html', stem: 'doc', type: 'text/html', }); // export file as text (only textContent is extracted) expect(doc.file('.txt')).toEqual({ content: 'some markdown content', extension: '.txt', name: 'doc.txt', stem: 'doc', type: 'text/plain', }); // easily search on a doc expect(doc.search('nt')).toEqual([ { start: 16, end: 18, value: 'nt', snippet: ['some markdown co', 'nt', 'ent'], }, { start: 19, end: 21, value: 'nt', snippet: ['some markdown conte', 'nt', ''], }, ]); // retrieve just the textContent of the document expect(doc.textContent()).toEqual('some markdown content'); // retrieve the `hast` (syntax tree) representation of the document expect(doc.parse()).toEqual({ // hast tree type: 'root', children: [...], }); // compile the document to use the results for rendering expect(doc.compile()).toBeInstanceOf(VFile); // vfile instance ``` -------------------------------- ### Markdown with 'one' ordered list marker configuration Source: https://unifiedjs.com/explore/package/remark-lint-ordered-list-marker-value When configured with `'one'`, all ordered lists should start with marker `1`. This example shows a valid Markdown structure adhering to this rule. ```markdown 1. Mercury 1. Venus ``` -------------------------------- ### Install unist-util-parents with npm Source: https://unifiedjs.com/explore/package/unist-util-parents Install the package in Node.js using npm. ```bash npm install unist-util-parents ``` -------------------------------- ### Example: Initial blank line - Not OK - Inconsistent indentation Source: https://unifiedjs.com/explore/package/remark-lint-list-item-content-indent Shows a list item starting with a blank line, followed by content that has inconsistent indentation. This will generate a linting error. ```markdown *      asd *** ``` -------------------------------- ### User Configuration Example Source: https://unifiedjs.com/explore/package/%40remark-embedder/core Demonstrates how a user would import and configure a custom transformer, including casting the config with TypeScript. ```javascript // ... import transformer from '@remark-embedder/transformer-codesandbox' import type {Config as CodesandboxConfig} from '@remark-embedder/transformer-codesandbox' // ... remark().use(remarkEmbedder, { transformers: [codesandboxTransformer, config as CodesandboxConfig], }) // ... ``` -------------------------------- ### Usage: Adjust heading depth by a fixed amount Source: https://unifiedjs.com/explore/package/remark-behead Use remark-behead to increase heading depths by a specified amount. This example increases depths by 1, starting after headings with a depth of 0. ```javascript import behead from 'remark-behead'; import {remark} from 'remark'; remark() .use(behead, {depth: 1, after: 0}) .process(['# foo', '# bar', '# baz'].join('\n')) .then((vfile) => vfile.toString()) .then((markdown) => console.log(markdown)) .catch((err) => console.error(err)); /* * # foo * * ## bar * * ## baz */ ``` -------------------------------- ### Process text with retext-contractions Source: https://unifiedjs.com/explore/package/retext-contractions Example of using retext-contractions as a unified plugin to process a text file and report issues. This setup includes retext-english for language support and retext-stringify to format the output. ```javascript import retextContractions from 'retext-contractions' import retextEnglish from 'retext-english' import retextStringify from 'retext-stringify' import {read} from 'to-vfile' import {unified} from 'unified' import {reporter} from 'vfile-reporter' const file = await unified() .use(retextEnglish) .use(retextContractions) .use(retextStringify) .process(await read('example.txt')) console.error(reporter(file)) ``` -------------------------------- ### Install remark-preset-lint-markdown-style-guide with npm Source: https://unifiedjs.com/explore/package/remark-preset-lint-markdown-style-guide Install the package using npm for Node.js environments (version 16+). ```bash npm install remark-preset-lint-markdown-style-guide ``` -------------------------------- ### Initialize remark Processor with Wiki Link Plugin Source: https://unifiedjs.com/explore/package/remark-wiki-link Basic setup for the unified processor to include markdown parsing and the wiki link plugin. ```javascript const unified = require('unified') const markdown = require('remark-parse') const wikiLinkPlugin = require('remark-wiki-link'); let processor = unified() .use(markdown, { gfm: true }) .use(wikiLinkPlugin) ``` -------------------------------- ### Configure Rehype Sanitize for Rehype Highlight Source: https://unifiedjs.com/explore/package/rehype-highlight If rehype-highlight is used before rehype-sanitize, configure sanitize to allow specific classes like 'hljs-'. This example demonstrates allowing all class names starting with 'hljs-'. ```javascript import {unified} from 'unified' import rehypeHighlight from './index.js' import rehypeParse from 'rehype-parse' import rehypeSanitize, {defaultSchema} from 'rehype-sanitize' import rehypeStringify from 'rehype-stringify' const file = await unified() .use(rehypeParse, {fragment: true}) .use(rehypeHighlight) .use(rehypeSanitize, { ...defaultSchema, attributes: { ...defaultSchema.attributes, span: [ ...(defaultSchema.attributes?.span || []), // Allow all class names starting with `hljs-`. ['className', /^hljs-./] // Alternatively, to allow only certain class names: // ['className', 'hljs-number', 'hljs-title', 'hljs-variable'] ] }, tagNames: [...(defaultSchema.tagNames || []), 'span'] }) .use(rehypeStringify) .process('
console.log(1)
') console.log(String(file)) ``` -------------------------------- ### Markdown Example with rehype-ignore Source: https://unifiedjs.com/explore/package/rehype-ignore Illustrates using rehype-ignore with Markdown input. Content between and comments in Markdown will be ignored during processing. ```markdown # Hello World Hello World Good! ``` -------------------------------- ### Compile Markdown to Virtual DOM with remark-preact-renderer Source: https://unifiedjs.com/explore/package/remark-render Example demonstrating how to use remark-render with remark-preact-renderer to compile markdown to Virtual DOM. This snippet shows the basic setup for rendering markdown content into a Preact VNode. ```javascript var renderer = require('remark-preact-renderer'); unified().use(render, { renderer: renderer, h: h, rootClassName: 'markdown-body', rootTagName: 'main' }) =>
``` -------------------------------- ### Compiling with Remark Plugins Source: https://unifiedjs.com/explore/package/%40mdx-js/mdx Shows how to compile a file using `remark-gfm` and `remark-frontmatter` plugins, with examples of single plugins, multiple plugins, and plugins with options. ```javascript import remarkFrontmatter from 'remark-frontmatter' // YAML and such. import remarkGfm from 'remark-gfm' // Tables, footnotes, strikethrough, task lists, literal URLs. await compile(file, {remarkPlugins: [remarkGfm]}) // One plugin. await compile(file, {remarkPlugins: [[remarkFrontmatter, 'toml']]}) // A plugin with options. await compile(file, {remarkPlugins: [remarkGfm, remarkFrontmatter]}) // Two plugins. await compile(file, {remarkPlugins: [[remarkGfm, {singleTilde: false}], remarkFrontmatter]}) // Two plugins, first w/ options. ``` -------------------------------- ### Invalid Markdown with 'one' ordered list marker configuration Source: https://unifiedjs.com/explore/package/remark-lint-ordered-list-marker-value This example demonstrates invalid Markdown when configured with `'one'`. The rule flags unexpected marker values, indicating deviations from the expected sequence starting at `1`. ```markdown 1. Mercury 2. Venus *** 3. Earth *** 2. Mars 1. Jupiter ``` -------------------------------- ### Create index.js for remark language server Source: https://unifiedjs.com/explore/package/unified-language-server Set up the main entry point for your remark language server using Node.js. This script initializes the language server with specific configurations. ```javascript import {remark} from 'remark' import {createUnifiedLanguageServer} from 'unified-language-server' process.title = 'remark-language-server' createUnifiedLanguageServer({ ignoreName: '.remarkignore', packageField: 'remarkConfig', pluginPrefix: 'remark', rcName: '.remarkrc', processorName: 'remark', processorSpecifier: 'remark', defaultProcessor: remark }) ``` -------------------------------- ### Example HTML file Source: https://unifiedjs.com/explore/package/rehype-format An example HTML file used to demonstrate rehype-format. ```html Hello!

hi there

``` -------------------------------- ### Use mdast-zone to replace content between comments Source: https://unifiedjs.com/explore/package/mdast-zone This example demonstrates how to use mdast-zone to find comments like '' and '' and replace the content between them with new content. ```javascript /** * @import {Plugin} from 'unified' * @import {Root} from 'mdast' */ import {zone} from 'mdast-zone' import {remark} from 'remark' import {read} from 'to-vfile' const file = await remark() .use(myPluginThatReplacesFoo) .process(await read('example.md')) console.log(String(file)) /** @type {Plugin<[], Root>} */ function myPluginThatReplacesFoo() { return function (tree) { zone(tree, 'foo', function (start, nodes, end) { return [ start, {type: 'paragraph', children: [{type: 'text', value: 'Bar.'}]}, end ] }) } } ``` -------------------------------- ### Compile Markdown to Virtual DOM with hyperscript Source: https://unifiedjs.com/explore/package/remark-render Example demonstrating how to use remark-render with hyperscript to compile markdown to Virtual DOM. This snippet shows the setup for rendering markdown content into a VDOM structure using hyperscript for element creation. ```javascript var unified = require('unified') var parse = require('remark-parse') var render = require('remark-render') var h = require('hyperscript'); unified() .use(parse) .use(render, { h: h, // create element function rootClassName: 'markdown-body' // vdom root element class name, rootTagName: 'main' }) .process('# h1 ## h2', function(err, file) { if (err) throw err console.dir(file.contents, {depth: null}) }) ``` -------------------------------- ### Example with tick markers (configured for tick) Source: https://unifiedjs.com/explore/package/remark-lint-fenced-code-marker Demonstrates correct usage when the rule is configured to expect tick markers. ```markdown When configured with '`'`. ###### In ``` ```javascript mercury() ``` ``` venus() ``` ``` ``` -------------------------------- ### Install hast-util-find-and-replace with npm Source: https://unifiedjs.com/explore/package/hast-util-find-and-replace Install the package using npm. This is the standard installation method for Node.js projects. ```bash npm install hast-util-find-and-replace ``` -------------------------------- ### Basic redot-cli Usage Source: https://unifiedjs.com/explore/package/redot-cli Run redot-cli on a file named 'example.gv' and output the result. ```bash redot example.gv --output ``` -------------------------------- ### Install rehype-mathjax with npm Source: https://unifiedjs.com/explore/package/rehype-mathjax Install the rehype-mathjax package using npm. This is the standard installation method for Node.js projects. ```bash npm install rehype-mathjax ``` -------------------------------- ### Install rehype-resolution with npm Source: https://unifiedjs.com/explore/package/rehype-resolution This command shows how to install the rehype-resolution package using npm. It is a standard npm installation command. ```bash $ npm install rehype-resolution ``` -------------------------------- ### args(options) Source: https://unifiedjs.com/explore/package/unified-args Starts the CLI by parsing `process.argv` and handling the process lifecycle. This function takes over the entire process. ```APIDOC ## args(options) ### Description Start the CLI. This function takes over the entire process. It parses `process.argv`, exits when its done, etc. ### Parameters #### Path Parameters None #### Query Parameters None #### Request Body None ### Parameters * `options` (`Options`, required) — configuration ### Returns Nothing (`undefined`) ### Options Type #### Options Configuration (TypeScript type). ##### Fields * `description` (`string`, required) — description of executable * `extensions` (`Array`, required) — default file extensions to include (engine: `options.extensions`) * `ignoreName` (`string`, required) — name of ignore files to load (engine: `options.ignoreName`) * `name` (`string`, required) — name of executable * `packageField` (`string`, required) — field where configuration can be found in `package.json`s (engine: `options.packageField`) * `pluginPrefix` (`string`, required) — prefix to use when searching for plugins (engine: `options.pluginPrefix`) * `processor` (`Processor`, required) — processor to use (engine: `options.processor`) * `rcName` (`string`, required) — name of configuration files to load (engine: `options.rcName`) * `version` (`string`, required) — version of executable ``` -------------------------------- ### Install Rehype TOC Source: https://unifiedjs.com/explore/package/%40jsdevtools/rehype-toc Install the Rehype TOC package using npm. It is recommended to also install unified, rehype-parse, rehype-stringify, and rehype-slug. ```bash npm install @jsdevtools/rehype-toc ``` ```bash npm install unified rehype-parse rehype-stringify rehype-slug ``` -------------------------------- ### Create a new VFile instance Source: https://unifiedjs.com/explore/package/vfile Demonstrates creating a new VFile instance with different types of options: no options, a string value, a Uint8Array value, a path object, and an object with stem, extname, and dirname. ```javascript new VFile() new VFile('console.log("alpha");') new VFile(new Uint8Array([0x65, 0x78, 0x69, 0x74, 0x20, 0x31])) new VFile({path: path.join('path', 'to', 'readme.md')}) new VFile({stem: 'readme', extname: '.md', dirname: path.join('path', 'to')}) new VFile({other: 'properties', are: 'copied', ov: {e: 'r'}}) ``` -------------------------------- ### Install remark-cli and plugins Source: https://unifiedjs.com/explore/package/remark-cli Install remark-cli and necessary plugins for linting and table of contents generation. This is a prerequisite for using the formatting script. ```bash npm install --save-dev remark-cli remark-preset-lint-consistent remark-preset-lint-recommended remark-toc ``` -------------------------------- ### Install unist-util-index with npm Source: https://unifiedjs.com/explore/package/unist-util-index Install the package in a Node.js environment using npm. ```bash npm install unist-util-index ``` -------------------------------- ### Install remark-cli and remark-ember-abc globally Source: https://unifiedjs.com/explore/package/remark-ember-abc Install the necessary tools globally to use remark-ember-abc from the command line. ```bash npm install -g remark-cli remark-ember-abc ``` -------------------------------- ### Basic vfile Usage Source: https://unifiedjs.com/explore/package/vfile Demonstrates creating a VFile, accessing its properties, modifying them, and adding a message. ```javascript import {VFile} from 'vfile' const file = new VFile({ path: '~/example.txt', value: 'Alpha *braavo* charlie.' }) console.log(file.path) // => '~/example.txt' console.log(file.dirname) // => '~' file.extname = '.md' console.log(file.basename) // => 'example.md' file.basename = 'index.text' console.log(file.history) // => ['~/example.txt', '~/example.md', '~/index.text'] file.message('Unexpected unknown word `braavo`, did you mean `bravo`?', { place: {line: 1, column: 8}, source: 'spell', ruleId: 'typo' }) console.log(file.messages) ``` -------------------------------- ### Example: passing options to remark-stringify Source: https://unifiedjs.com/explore/package/remark Demonstrates how to pass options to `remark-stringify` when using the `remark` processor by utilizing the `data('settings', ...)` method. ```APIDOC ## Example: passing options to `remark-stringify` ### Description When you use `remark-stringify` manually you can pass options to `use`. Because `remark-stringify` is already used in `remark` that’s not possible. To define options for `remark-stringify`, you can instead pass options to `data`: ### Code ```javascript import {remark} from 'remark' const value = ` # Moons of Neptune 1. Naiad 2. Thalassa 3. Despine 4. … ` const file = await remark() .data('settings', { bulletOrdered: ')', incrementListMarker: false, setext: true }) .process(value) console.log(String(file)) ``` ### Yields ``` Moons of Neptune ================ 1) Naiad 1) Thalassa 1) Despine 1) … ``` ``` -------------------------------- ### Example Output with Warnings Source: https://unifiedjs.com/explore/package/remark-validate-links The output from running the example JavaScript code, showing warnings for missing headings and files. ```text example.md 6:6-6:27 warning Cannot find heading for `#apha`; did you mean `alpha` missing-heading remark-validate-links:missing-heading 11:5-11:53 warning Cannot find file `missing-example.js` missing-file remark-validate-links:missing-file 16:1-16:20 warning Cannot find heading for `#charlie` missing-heading remark-validate-links:missing-heading ⚠ 3 warnings ``` -------------------------------- ### Install @mavrin/remark-typograf and remark Source: https://unifiedjs.com/explore/package/%40mavrin/remark-typograf Install the necessary packages using npm. ```bash npm install @mavrin/remark-typograf remark ``` -------------------------------- ### Install unist-util-select in Node.js Source: https://unifiedjs.com/explore/package/unist-util-select Install the package using npm for Node.js environments. ```bash npm install unist-util-select ``` -------------------------------- ### Initialize Doc Instances Source: https://unifiedjs.com/explore/package/unified-doc Initialize a doc instance with markdown, HTML, or code content. Specify the filename for context. ```javascript // initialize as markdown content const doc1 = Doc({ content: '> **some** markdown content', filename: 'doc.md', }); // initialize as html content const doc2 = Doc({ content: '
some markdown content
', filename: 'doc.html', }); // initialize as code content const doc3 = Doc({ content: 'var hello = "world";'; filename: 'doc.js', }); ``` -------------------------------- ### Document Initialization and Basic Operations Source: https://unifiedjs.com/explore/package/unified-doc Demonstrates how to initialize a `Doc` instance with content and filename, and access basic file information. ```APIDOC ## Initialize Document ### Description Initializes a `Doc` instance with provided content and filename. This instance provides access to various document manipulation APIs. ### Method `Doc(options)` ### Parameters - **options** (object) - Required - Configuration object for the document. - **content** (string) - Required - The content of the document. - **filename** (string) - Required - The name of the document file. ### Request Example ```javascript import Doc from 'unified-doc'; const doc = Doc({ content: '> **some** markdown content', filename: 'doc.md', }); ``` ## Export File Information ### Description Exports the document's file information in different formats (e.g., markdown, HTML, plain text). ### Method `doc.file(extension?)` ### Parameters - **extension** (string) - Optional - The desired file extension for export (e.g., '.html', '.txt'). If not provided, exports in the original format. ### Response #### Success Response (object) - **content** (string) - The content of the file in the specified format. - **extension** (string) - The file extension. - **name** (string) - The filename. - **stem** (string) - The filename without the extension. - **type** (string) - The MIME type of the content. ### Response Example ```json { "content": "> **some** markdown content", "extension": ".md", "name": "doc.md", "stem": "doc", "type": "text/markdown" } ``` ## Export File as HTML ### Description Exports the document content specifically as HTML. ### Method `doc.file('.html')` ### Response Example ```json { "content": "
some markdown content
", "extension": ".html", "name": "doc.html", "stem": "doc", "type": "text/html" } ``` ## Export File as Text ### Description Exports the document content as plain text, extracting only the text content. ### Method `doc.file('.txt')` ### Response Example ```json { "content": "some markdown content", "extension": ".txt", "name": "doc.txt", "stem": "doc", "type": "text/plain" } ``` ``` -------------------------------- ### Installation of related packages Source: https://unifiedjs.com/explore/package/%40jsdevtools/rehype-inline-svg Install necessary packages like unified, rehype-parse, rehype-stringify, and to-vfile. ```bash npm install unified rehype-parse rehype-stringify to-vfile ``` -------------------------------- ### Install unist-util-find-all-after with esm.sh for Browsers Source: https://unifiedjs.com/explore/package/unist-util-find-all-after Import the package from esm.sh for use in browser environments. The ?bundle flag is used for bundling. ```html ``` -------------------------------- ### Install unist-diff Source: https://unifiedjs.com/explore/package/unist-diff Install the unist-diff package using npm. ```bash npm install unist-diff ``` -------------------------------- ### Usage Example Source: https://unifiedjs.com/explore/package/remark-package-dependencies Use remark-package-dependencies to process markdown and inject dependency information. Ensure the 'options' object is defined with desired configurations. ```javascript const remark = require('remark'); const gfm = require('remark-gfm'); const remarkPackageDependencies = require('remark-package-dependencies'); const input = '## Dependencies'; const output = remark() .use(gfm) .use(remarkPackageDependencies, options) .processSync(input) .toString(); ``` -------------------------------- ### Install unist-util-source with npm Source: https://unifiedjs.com/explore/package/unist-util-source Install the package in a Node.js environment using npm. ```bash npm install unist-util-source ``` -------------------------------- ### Install unified-doc-parse-csv Source: https://unifiedjs.com/explore/package/unified-doc-parse-csv Install the unified-doc-parse-csv package using npm. ```bash npm install unified-doc-parse-csv ``` -------------------------------- ### Install unified-doc-types Source: https://unifiedjs.com/explore/package/unified-doc-types Install the unified-doc-types package using npm. ```bash npm install unified-doc-types ``` -------------------------------- ### Example Usage of vfile-reporter Source: https://unifiedjs.com/explore/package/vfile-reporter Demonstrates how to create VFiles, add messages, and generate a report using the reporter function. The output shows warnings and issues found. ```javascript import {VFile} from 'vfile' import {reporter} from 'vfile-reporter' const one = new VFile({path: 'test/fixture/1.js'}) const two = new VFile({path: 'test/fixture/2.js'}) one.message('Warning!', {line: 2, column: 4}) console.error(reporter([one, two])) ``` -------------------------------- ### Example: Multiple allowed extensions Source: https://unifiedjs.com/explore/package/remark-lint-file-extension Demonstrates the output when a file has an unexpected extension ('css') but a comprehensive list of allowed extensions is provided. ```text 1:1: Unexpected file extension `css`, expected `markdown`, `md`, `mdown`, … ``` -------------------------------- ### Install retext-overuse Source: https://unifiedjs.com/explore/package/retext-overuse Install the retext-overuse package using npm. ```bash npm install retext-overuse ``` -------------------------------- ### Load Plugin with Prefix Source: https://unifiedjs.com/explore/package/unified-engine Processes `readme.md` and loads `preset-lint-recommended` with `pluginPrefix` set to `remark`, resolving to `remark-preset-lint-recommended`. ```javascript import {remark} from 'remark' import {engine} from 'unified-engine' engine( { files: ['readme.md'], pluginPrefix: 'remark', plugins: ['preset-lint-recommended'], processor: remark() }, function (error) { if (error) throw error } ) ``` -------------------------------- ### Install retext-no-emojis Source: https://unifiedjs.com/explore/package/retext-no-emojis Install the retext-no-emojis package using npm. ```bash npm install retext-no-emojis ``` -------------------------------- ### Install remark-frontmatter and remark-mdx-frontmatter Source: https://unifiedjs.com/explore/package/remark-mdx-frontmatter Install the necessary packages for remark-frontmatter and remark-mdx-frontmatter. This package depends on the AST output by remark-frontmatter. ```bash npm install remark-frontmatter remark-mdx-frontmatter ```