1.0.1 ā€¢ Published 1 year ago

@jcbhmr/md-html v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

Markdown in HTML

šŸ“ Write raw Markdown in .md.html files that gets auto-rendered everywhere \ šŸ”€ Forked from morgan3d/markdeep

npm.io

šŸ“‚ Renders file:///document.html pages \ šŸļø Works offline (when inlined) \ šŸ“œ Failsafe text fallback when <script> is unavailable

šŸ‘€ You might also be looking for a Markdown custom element like @polymer/marked-element.

Installation

āš ļø This project is intended to be sourced directly from a <script src="..."> script tag with no other content on the page.

Just add this code to the very top of your page:

<script src="https://unpkg.com/@jcbhmr/md-html"></script><plaintext>

šŸŽØ Make sure you set your autoformatter like Prettier to associate .md.html files with Markdown! They should still work like normal; the <script><plaintext> prefix won't affect anything.

šŸļø If you want to install this for use offline, the recommended way is to download the latest jcbhmr-md-html.min.js file and do something like this:

file:///home/you/Documents/try-md-html/
ā”œā”€ā”€ jcbhmr-md-html.min.js
ā””ā”€ā”€ Your_super_cool_document.md.html
<script src="jcbhmr-md-html.min.js"></script><plaintext>

āš™ļø If you really want it to all be in one file you can inline the JavaScript code using something like remy/inliner. Be warned that this could make it more difficult to edit the actual Markdown part of the document. If you do this, it's recommended to turn off "Word wrap" so that you can let the top few lines of JavaScript mostly be offscreen without wrapping and taking up too much space.

Usage

After adding the <script> and <plaintext> tags to your .md.html file, you can get started editing your document in ernest! You can use any relgular old text editor to compose your markdown; even Windows Notepad works great, especially when you split your screen into two windows: half Chrome and half Notepad! It even works with local file: URLs, so you can just email or share a plain .html file with someone, and they will be able to open and view it.

<script src="https://unpkg.com/@jcbhmr/md-html"></script><plaintext>

# Hello world!

This is my **Markdown document**! There's some <mark>HTML</mark> elements in
here <u>too</u> since Markdown supports _inline HTML_.

āœØ You can use all the features of GitHub Flavored Markdown!

<script src="https://unpkg.com/@jcbhmr/md-html"></script><plaintext>

| This is a test |
| -------------- |
| I'm a table!   |

āž• If you want a more full-featured Markdown editing toolkit, checkout StackEdit or Dillinger.io. ā¤ļø

Exporting your rendered document

When you view a .md.html file in your browser, you can open up the DevTools console in Chrome or Firefox using F12 to be greeted by some lovely instructions on how to export your rendered document if you choose.

TODO: Add excerpt here