Skip to content
Use Markdown in HTML
JavaScript HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
test
.editorconfig
.gitignore
.rollup.js
.tape.js
.travis.yml
CHANGELOG.md
CONTRIBUTING.md
INSTALL.md
LICENSE.md
README.md
package.json

README.md

pHTML Markdown pHTML

NPM Version Build Status Support Chat

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/markdown

Node

Add pHTML Markdown to your project:

npm install @phtml/markdown --save-dev

Use 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>
You can’t perform that action at this time.