How to style the output?

[lilouartz]

The generated output does not have any class or anything I could target in the output:

<div><p><br>
Shoutout to <a href="https://lighthouse-metrics.com/">Lighthouse Metrics</a> as their service has been a great help in understanding how Pillser is performing on the web accross the globe.</p></div>

[lilouartz]

Did it with:

const remarkAdmonitionsStyle = () => {
  return (tree: Node) => {
    visit(tree, (node) => {
      if (node.type !== 'containerDirective') {
        return;
      }

      if (!('name' in node) || typeof node.type !== 'string') {
        return;
      }

      const data = node.data || (node.data = {});

      data.hName = 'div';
      data.hProperties = h('div', {
        className: 'admonition-' + node.name,
      }).properties;
    });
  };
};

[LuudJanssen]

Hi @lilouartz! How the directives are converted into HTML (and CSS) is up to the tools you're using. This plugin just turns markdown syntax A in to markdown syntax B.

If you're using Docusaurus to style the admonitions there's a guide on how to style them over at the Docusaurus documentation on admonitions.

If you're using remark-rehype to turn markdown into HTML, you should use the remark-admonitions plugin to turn the directives syntax into HTML you can style (or use the included style from the plugin).

Example (copied and slightly altered from remark-admonitions README):

const unified = require('unified')
const markdown = require('remark-parse')
const ghAdmonitions = require('remark-github-admonitions-to-directives')
const admonitions = require('remark-admonitions')
const remark2rehype = require('remark-rehype')
const doc = require('rehype-document')
const format = require('rehype-format')
const html = require('rehype-stringify')
const vfile = require('to-vfile')
const report = require('vfile-reporter')

const options = {}

unified()
  .use(markdown)
  .use(ghAdmonitions)
  .use(admonitions, options)
  .use(remark2rehype)
  .use(doc)
  .use(format)
  .use(html)
  .process(vfile.readSync('./input.md'), (error, result) => {
      console.error(report(error || result))
      if (result) {
        result.basename = "output.html"
        vfile.writeSync(result)
      }
  })