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
.
In the repository containing your markdown documents, add this package to devDependencies :
npm i -D mdfc-map-to-html
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.
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: 72x72
You 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
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>
.
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.
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 :
<script src="my-script.js" async></script><script src="http://cdn.domain.tld/dependency.js" defer crossorigin="anonymous"></script><script>document.title = "a new title";</script>
See MDN documentation for further information.