pHTML Markdown 
pHTML Markdown lets you write markdown in HTML.
<h1 markdown>pHTML **Markdown**</h1>
<div markdown>
### Make it clear.
Integrate this love and fear.
Still hopelessly hopeful.
Wounded child seeking wonderful.
</div>
<!-- becomes -->
<h1>pHTML <strong>Markdown</strong></h1>
<div>
<h3 id="make-it-clear">Make it clear.</h3>
<p>Integrate this love and fear.</p>
<p>Still hopelessly hopeful.</p>
<p>Wounded child seeking wonderful.</p>
</div>Usage
Transform HTML files directly from the command line:
npx phtml source.html output.html -p @phtml/markdownNode
Add pHTML Markdown to your project:
npm install @phtml/markdown --save-devUse pHTML Markdown to process your HTML:
const phtmlMarkdown = require('@phtml/markdown');
phtmlMarkdown.process(YOUR_HTML /*, processOptions, pluginOptions */);Or use it as a pHTML plugin:
const phtml = require('phtml');
const phtmlMarkdown = require('@phtml/markdown');
phtml([
phtmlMarkdown(/* pluginOptions */)
]).process(YOUR_HTML /*, processOptions */);pHTML Markdown runs in all Node environments, with special instructions for:
| Node | CLI | Eleventy | Gulp | Grunt |
|---|
Options
attr
The attr option defines attributes used to trigger Markdown parsing. By
default, content of elements using md or markdown attributes are parsed as
Markdown.
// parse the content of elements with a data-markdown attribute
phtmlMarkdown({ attr: 'data-markdown' })
// parse the content of elements with data-markdown or data-md attributes
phtmlMarkdown({ attr: ['data-markdown', 'data-md'] })<body data-markdown>
# You say you want a revolution
</body><body>
<h1>You say you want a revolution</h1>
</body>removeAttr
The removeAttr option defines attributes used to trigger Markdown parsing
that should also be removed. By default, whichever attributes are passed to
attr are used. You might use this if the attribute you are using will also
be used by the browser or another plugin.
// remove the md attribute from elements with data-content or md attributes
phtmlMarkdown({ attr: ['data-content', 'md'], removeAttr: 'md' })<p data-markdown>
You say you want a **revolution**.
</p>
<p md>
Well, you _know_.
</p><p data-markdown>
You say you want a <strong>revolution</strong>.
</p>
<p>
Well, you <em>know</em>.
</p>marked
The marked option defines options passed into
marked.
phtmlMarkdown({ marked: { headerIds: false } })<body markdown>
# You say you want a revolution
</body><body>
<h1>You say you want a revolution</h1>
</body>