Markdown

In this section we'll cover some of the Markdown related feature of Greenwood, which by default supports the CommonMark specification and unifiedjs as the markdown / content framework.

Imports

From within the markdown you can also render components, not just their syntax, by importing them via front-matter.

Example

At the top of a .md file add an import section to render a component inline to the page itself. This can be helpful if there are situations where you may want to import a component for a specific set of pages, as opposed to through a page or app template.:

---
imports:
  - /components/counter/counter.js
---

## My Demo Page
<x-counter></x-counter>

See our component model docs for more information on authoring custom elements / components. For information on configuring additional page meta data, see our section on front-matter.

Configuration

Using your greenwood.config.js you can have additional markdown customizations and configurations using unified presets and plugins.

For example, to add support for Prism for syntax highlighting, after installing @mapbox/rehype-prism via npm, just add following to your config file:

export default {
  // ...

  markdown: {
    settings: { /* whatever you need */ },
    plugins: [
      '@mapbox/rehype-prism'
    ]
  }

};

Syntax Highlighting

Although Greenwood does not provide any syntax highlighting by default, as demonstrated in the section above, it is fairly easy to add something like Prism syntax highlighting to your project.

Here is an example of how to include a Prism theme from a CSS file into your project, ex:

/* https://prismjs.com/examples.html */
@import url('../../node_modules/prismjs/themes/prism-tomorrow.css');

Then if you add one of the supported language after the fencing prismjs will add syntax highlighting to your code fences.

Write the following in your markdown

```js
const hello = 'world';

<p>${hello}</p>
```

To get this result:

const hello = 'world';

<p>${hello}</p>