This package allows you to import the content of a Markdown file into Stencil Components.
Under the hood, it converts your Markdown to JSX.
First, npm install within the project:
npm install stencil-markdown --save-dev
Next, within the project's stencil.config.js
file, import the plugin and add it to the config's plugins
config:
import { Config } from '@stencil/core';
import { markdown } from 'stencil-markdown';
export const config: Config = {
plugins: [
markdown()
]
};
During development, this plugin will kick-in for explicitly imported .md
or .markdown
files, and convert them to a FunctionalComponent.
import { Component } from '@stencil/core';
import Content from '../../docs/hello-world.md';
@Component({
tag: 'my-component'
})
export class MyComponent {
render() {
return (
<div>
<Content/>
</div>
)
}
}
In order to allow Typescript to import .md or .markdown files, please add the following file to your project in the src/
directory.
import 'stencil-markdown';
Stencil Markdown parses YAML Frontmatter—no configuration needed.
---
title: Hello world!
---
## Hey, world!
import { Component } from '@stencil/core';
import Content, { frontmatter } from '../../docs/hello-world.md';
@Component({
tag: 'my-component'
})
export class MyComponent {
componentWillLoad() {
console.log(frontmatter);
}
render() {
return (
<div>
<Content/>
</div>
)
}
}
Marked options can be passed to the plugin within stencil.config.js
, which are used directly by marked
. Please reference marked documentation for all available options.