In this section we'll cover some of the Markdown related feature of Greenwood, which by default supports the CommonMark specification.

Syntax Highlighting

When rendering code fencing, if you add the language after the fencing, the included prismjs library will add syntax highlighting.

e.g. use:

const hello = "world";


To get the result:

const hello = "world";


Note: As demonstrated in the above example, backticks and $ characters require \ to escape correctly.

See our website theme for more examples on how to style PrismJS.


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


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

  HelloWorld: '../components/helloworld/helloworld.js'

<hello text='world'>World</hello>

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.


Using your greenwood.config.js, within your project's root directory, you can have additional markdown customizations and configurations using unified presets.