mdfc-map-to-html
An implementation package for md-file-converter.
This implementation output super basic .html files.
Internals links insides markdown files should point to .md files. This impl handle the change to .html.
installation
In the repository containing your markdown documents, add this package to devDependencies :
npm i -D mdfc-map-to-htmlusage
Invoke the CLI with the following :
node ./node_modules/.bin/mdfc convert 'mdfc-map-to-html' '<markdown-files-path>'html files will be created in the same directory as the markdown files.
If you want to create them in another directory you can add a --dest option with the destination path, for example :
node ./node_modules/.bin/mdfc convert 'mdfc-map-to-html' 'tests/actual-files/faq/**/*.md' --dest 'html-output/'but the markdown structure will not be preserved, so be careful of .md file naming, each filename must be unique.
css support
You can define custom css stylesheet injection with front-matter in your markdown files.
See tests/actual-files/css-support/test-news-with-css.md for example.
The idea is to define the stylesheet values in the front-matter to add it to the generated html during the mapping phase.
Your yaml could look like this :
htmlHead: links: - href: mobile.css rel: stylesheet media: all - href: print.css rel: stylesheet media: print - href: desktop.css rel: stylesheet media: 'screen and (min-width: 600px)' - href: favicon32.png rel: icon - href: favicon72.png rel: apple-touch-icon-precomposed sizes: 72x72You can deal with favicon here also.
An <article> tag is added to wrap the generated content inside the document <body>.
A class name can be added to the <article> tag, just add a containerClass property to the htmlHead property in the yaml like that :
htmlHead: containerClass: 'my-class' links: - href: mobile.css rel: stylesheet media: all - href: print.css rel: stylesheet media: print<title> support
Like css support, you can define your document <title> with front-matter in your markdown files.
The html document <title> is very important for SEO, choose it carefully.
To specify the <title> value, add a title property in the front-matter like this :
htmlHead: title: 'git-sizer publié par GitHub'If you don't, the <title> tag value is set with the markdown file basename.
For example if your markdown file is named my-article.md, you will get <title>my-article</title>.
<meta> tags support
Like css support, you can define your document <meta> with front-matter in your markdown files.
The idea is to define the meta tags values in the front-matter to add it to the generated html during the mapping phase.
Your yaml could look like this :
htmlHead: metaTags: - name: description content: 'my uber document' - name: viewport content: 'width=device-width, initial-scale=1, minimal-ui' - property: 'og:type' content: website - httpEquiv: 'Expires' content: '0'The html <meta> tags are very important to manage for :
- SEO (see also the Open Graph protocol and this medium article)
- viewport behavior (especially important for mobiles)
- ...
See MDN documentation for further information.
<script> tags support
Like css support, you can define your document <script> with front-matter in your markdown files.
Same as above your yaml could look like this :
htmlHead: scripts: - src: 'my-script.js' async: true - src: 'http://cdn.domain.tld/dependency.js' defer: true crossorigin: 'anonymous' - text: 'document.title = "a new title";'and it will output at the end of <head> tag :
See MDN documentation for further information.