Argdown

# 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:

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 Gatsby (opens new window), Eleventy (opens new window) or Vuepress (opens new window) 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:

const remark = require("remark");
const remarkArgdownPlugin = require("@argdown/remark-plugin").default;
const html = require("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);
    }
});

Note that this example uses import instead of require. If you want to use require the following should work:

const argdownPlugin = require("@argdown/remark-plugin").default;

# How to add Argdown support to Gatsby

Adding Argdown support to Gatsby is even easier:

npm install @argdown/gatsby-remark-plugin

gatsby-plugin-mdx (opens new window)

module.exports = {
  plugins: [
    {
      resolve: "gatsby-plugin-mdx",
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: "@argdown/gatsby-remark-plugin",
            options: {
              argdownConfig: {
                webComponent: {
                  withoutHeader: true
                }
              }
            }
          }
        ]
      }
    }
  ]
};

gatsby-transformer-remark (opens new window)

module.exports = {
  plugins: [
    {
      resolve: "gatsby-transformer-remark",
      options: {
        plugins: [
          {
            resolve: "@argdown/gatsby-remark-plugin",
            options: {
              argdownConfig: {
                webComponent: {
                  withoutHeader: true
                }
              }
            }
          }
        ]
      }
    }
  ]
};

# 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:

const MarkdownIt = require("markdown-it");
const createArgdownPlugin = require("@argdown/markdown-it-plugin").default;

const markdownItPlugin = 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:

const mdi = require("markdown-it");
const argdownConfig = {logLevel: "verbose"};
const createArgdownPlugin = require("@argdown/markdown-it-plugin").default;
const markdownItArgdown = createArgdownPlugin(argdownConfig);
const mdiInstance = mdi().use(markdownItArgdown);
module.exports = 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:

const marked = require("marked");
const { addArgdownSupportToMarked } = require("@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);

← Introduction →