Integrating Argdown-Markdown into applications

Advanced users that want to integrate the Argdown-Markdown export into existing applications or want to have direct access to the markdown parser have five options:

• remark with @argdown/remark-plugin
• markdown-it with @argdown/markdown-it-plugin
• eleventy with @argdown/markdown-it-plugin
• marked with @argdown/marked-plugin

Any application that uses one of these parsers and gives you the option to configure it, can be extended with Argdown support. For example,`the static site generators Eleventy or Vuepress can be configured to support the Argdown web component.

How to add Argdown support to Remark

Install remark, remark-html and @argdown/remark-plugin in your package:

npm install remark remark-html @argdown/remark-plugin

Configure remark:

import remark from "remark";
import remarkArgdownPlugin from "@argdown/remark-plugin";
import html from "remark-html";

const defaultSettings = {};
const rm = remark()
  .use(remarkArgdownPlugin, {
    argdownConfig: (cwd) => {
      return defaultSettings;
    }
  })
  .use(html);

const markdownInput = `
# Argdown in Markdown

\`\`\`argdown
[s]
    <- <a>
\`\`\`
`;

const argdownConfig = { webComponent: { withoutHeader: true }}; // example configuration
rm.process(markdownInput, (error, file)=>{
    if(!error){
        console.log(String(file));
    }else{
        console.log(error);
    }
});

How to add Argdown support to Markdown-It

Install markdown-it and @argdown/markdown-it-plugin in your package:

npm install markdown-it @argdown/markdown-it-plugin

Configure the markdown-it instance:

import MarkdownIt from "markdown-it";
import createArgdownPlugin from "@argdown/markdown-it-plugin";


const markdownItPlugin = await createArgdownPlugin(env => {
    return env.argdownConfig;
});
mdi.use(markdownItPlugin);
const markdownInput = `
# Argdown in Markdown

\`\`\`argdown
[s]
    <- <a>
\`\`\`
`;
const argdownConfig = { webComponent: { withoutHeader: true }; // example configuration
const htmlOutput = mdi.render(markdownInput, {
    argdownConfig // you can change the configuration for every file rendered
});
console.log(htmlOutput);

How to add Argdown support to eleventy

Install markdown-it and @argdown/markdown-it-plugin in your package:

npm install markdown-it @argdown/markdown-it-plugin

Configure eleventy in .eleventy.js:

import mdi from "markdown-it"
import createArgdownPlugin from "@argdown/markdown-it-plugin";

const argdownConfig = {logLevel: "verbose"};
const markdownItArgdown = await createArgdownPlugin(argdownConfig);
const mdiInstance = mdi().use(markdownItArgdown);
export default function(eleventyConfig) {
	eleventyConfig.setTemplateFormats([
		"html",
	  "md",
	  "css" // css is not yet a recognized template extension in Eleventy
	]);
	eleventyConfig.setLibrary("md", mdiInstance);
  };

How to add Argdown support to Marked

Install marked and @argdown/marked-plugin in your package:

npm install marked @argdown/marked-plugin

Configure the marked instance:

import marked from "marked";
import { addArgdownSupportToMarked } from "@argdown/marked-plugin";

const markedWithArgdown = addArgdownSupportToMarked(
  marked,
  new marked.Renderer(),
  {}
);
const markdownInput = `
# Argdown in Markdown

\`\`\`argdown
[s]
    <- <a>
\`\`\`
`;
const htmlOutput = markedWithArgdown(markdownInput);
console.log(htmlOutput);