![\"placehold.co\"](\"https://placehold.co/1500x300.png?text=Remote%20Loaded%20Image\")
Contented unified processor pipeline.
\nprocessor\n .use(options.before)\n .use(remarkGfm)\n .use(remarkFrontmatter)\n .use(remarkParse)\n .use(remarkLink)\n .use(remarkDirective)\n .use(remarkDirectiveRehypeCodeblockHeader)\n .use(remarkDirectiveRehypeCodeblockGroup)\n .use(remarkDirectiveRehype)\n .use(remarkFrontmatterCollect)\n .use(remarkFrontmatterResolve)\n .use(remarkFrontmatterValidate)\n .use(options.remarks)\n .use(remarkRehype)\n .use(options.rehypes)\n .use(rehypeExternalLinks, { target: '_blank' })\n .use(rehypeSlug)\n .use(rehypeAutolinkHeadings)\n .use(rehypeToc)\n .use(rehypeHeading)\n .use(rehypeMermaid)\n .use(rehypeShiki)\n .use(rehypeStringify)\n .use(options.after);GitHub Flavored Markdown, often shortened as GFM, is the dialect of Markdown that is\ncurrently supported for user content on GitHub.com and GitHub Enterprise.
\nThis formal specification, based on the CommonMark Spec, defines the syntax and semantics of this dialect.
\n---\ntitle: Markdown Flavour\n---[Heading](#heading)\n[External](https://example.com)\n\nRelative Linking (manual):\n[Relative Example 1](relative)\n[Relative Example 2](to/folder/page-1)\n[Relative Example 3](../back/page-3)\n\nRelative Linking (automatic), give these 3 files:\n\n1. 01-about.md\n2. docs/01-introduction.md\n3. docs/01-others/02-usage.md\n\n[Automatic Relative Linking](./01-about.md):\n\n- When you reference this link in the root dir of the pipeline `about` will be resolved.\n- When you reference this link in the `docs` dir of the pipeline `../about` will be resolved.\n- When you reference this link in the `docs/01-others` dir of the pipeline `../../about` will be resolved.\n\n[Automatic Relative Linking](./docs/01-introduction.md):\n\n- When you reference this link in the root dir of the pipeline `docs/introduction` will be resolved.\n- When you reference this link in the `docs` dir of the pipeline `introduction` will be resolved.\n- When you reference this link in the `docs/01-others` dir of the pipeline `../introduction` will be resolved.It is highly recommended to use relative links for internal linking and avoid using absolute links.\nThis is because contented pipelines are designed to be portable and can be deployed to different sites or domains.\nBy using absolute links, you're assuming that the content will always be deployed to the same domain or the same path.\nWhen using relative links, contented will automatically resolve the links to the correct destination.
\nFor example:
\n/** @type {import('@contentedjs/contented').ContentedConfig} */\nconst config = {\n preview: {\n url: 'https://preview.contented.dev',\n name: 'Preview Contented',\n },\n processor: {\n rootDir: '../docs',\n pipelines: [\n {\n type: 'ExampleType',\n pattern: 'example-docs/**/*md',\n processor: 'md',\n transform: (file) => {\n // Notice that the path example-docs/ is removed. There is no way to know how you path is structured.\n // You need therefore use relative links that works universally across all sites.\n // This is intentional to make contented pipelines portable.\n file.path = file.path.replaceAll(/^\\/example-docs\\/?/g, '/');\n file.sections = file.sections.slice(1);\n return file;\n },\n },\n ],\n },\n};\n\nexport default config;Pipeline Processed: -> /[path] (note docs/example-docs/ is removed)\n/docs/example-docs/page-1 -> /page-1\n/docs/example-docs/page-2 -> /page-2\n/docs/example-docs/folder/page-3 -> /folder/page-3\n\nPreview: -> https://preview.contented.dev/[type]/[path]\n/page-1 -> https://preview.contented.dev/example/page-1\n/page-2 -> https://preview.contented.dev/example/page-2\n/folder/page-3 -> https://preview.contented.dev/example/folder/page-3\n\nAnother Site: -> https://developer-docs.com/product-example/docs/[path]\n/page-1 -> https://developer-docs.com/product-example/docs/page-1\n/page-2 -> https://developer-docs.com/product-example/docs/page-2\n/folder/page-3 -> https://developer-docs.com/product-example/docs/folder/page-3Note how \"Another Site\" consumed the same contented pipeline but deployed to a different domain and path with its own\ncustom prefix. If you used absolute links, the links would be broken.
\nIt is also highly advised against linking to another \"Type\" as you're assuming that the other site will be\nstructured the same way as your site with the same prefix or even publishing that \"Type\" at all.
```mermaid\ngraph LR\n Start --> Stop\n``````mermaid\n graph TD;\n A-->B;\n A-->C;\n B-->D;\n C-->D;\n```They can be declared via long-form :::div{class=\"table-fixed\"} or short-form :::div{.table-fixed}
| Header 1 | \nHeader 2 | \nHeader 3 | \n
|---|---|---|
| Cell 1 | \nCell 2 | \nCell 3 LongTextThatCannotTruncate | \n
| Header 1 | Header 2 | Header 3 |\n| -------- | -------- | ----------------------------------- |\n| Cell 1 | Cell 2 | Cell 3 `LongTextThatCannotTruncate` || Table Fixed | \nHeader 2 | \nHeader 3 | \n
|---|---|---|
| Cell 1 | \nCell 2 | \nCell 3 | \n
:::div{class=\"table-fixed\"}\n| Table Fixed | Header 2 | Header 3 |\n|----------|----------|----------|\n| Cell 1 | Cell 2 | Cell 3 |\n:::| Table Auto | \nHeader 2 | \nHeader 3 | \n
|---|---|---|
| Cell 1 | \nCell 2 | \nCell 3 | \n
:::div{class=\"table-auto\"}\n| Table Auto | Header 2 | Header 3 |\n|----------|----------|----------|\n| Cell 1 | Cell 2 | Cell 3 |\n:::Admonitions with remark-directive and remark-directive-rehype.
This is div{.admonitions}.
:::div{.admonitions}\nThis is `div{.admonitions}`.\n:::This is div{.admonitions.red}.
:::div{.admonitions.red}\nThis is `div{.admonitions.red}`.\n:::This is div{.admonitions.yellow}.
:::div{.admonitions.yellow}\nThis is `div{.admonitions.yellow}`.\n:::This is div{.admonitions.green}.
:::div{.admonitions.green}\nThis is `div{.admonitions.green}`.\n:::const a: number = 1;\nconst b: number = 2;:::codeblock-header{filename=\"example.ts\" language=\"TypeScript\"}\n```ts\nconst a: number = 1;\nconst b: number = 2;\n```\n:::const a: number = 1;\nconst b: number = 2;const a = 1;\nconst b = 2;::::codeblock-group\n\n:::codeblock-header{filename=\"example.ts\" language=\"TypeScript\"}\n```ts\nconst a: number = 1;\nconst b: number = 2;\n```\n:::\n\n:::codeblock-header{filename=\"example.js\" language=\"JavaScript\"}\n```js\nconst a = 1;\nconst b = 2;\n```\n:::\n\n::::Image commonly used in Markdown is supported but with some caveats.\nContented being a prose-bundler is designed to bundle prose such that it is portable and can be deployed to different\nsites or domains.\nThis makes it difficult to support images that are not bundled together with the prose.\nTo get around this, all local images are embedded into the Markdown file as base64 encoded strings.\nRemote images are left as is.
\n\n\nYou can inspect this HTML page to see how the images are embedded.
\n
Always be careful with user input. For example, it’s possible to hide JavaScript inside images (such as GIFs, WebPs, and\nSVGs). User provided images open you up to a cross-site scripting (XSS) attack.
If you’re using Contented to render user-provided Markdown, you should disable images by default and only enable them\nwhen you trust the source. Contented designed to be used for developer authoring where the source is trusted and XSS\nbeing the least of your worries since the developer (having control of source code) can already inject arbitrary\nJavaScript into the page without needing to go through this lengthy process.
\n
\n