0.0.8 • Published 7 years ago

markdown-it-code-embed v0.0.8

Weekly downloads
17
License
MIT
Repository
github
Last release
7 years ago

MarkdownIt Code Embed

Code embed plugin for markdown-it markdown parser. Allows you to add embeds from services like Codepen to your markdown.

requires markdown-it v5.+.

Install

npm install markdown-it-code-embed --save

Use

in your script
const md = require('markdown-it')();
md.use(require('markdown-it-code-embed'));
in your markdown

You can provide just the slug hash for your Codepen embed like this:

@[codepen](ABC)

Or you can provide just the slug hash & pen title like this:

@[codepen](ABC,My Pen)

Or you can provide all the config options (must be valid json, and must be on a single line), like this:

@[codepen]({"slug_hash":"ABC", "pen_title":"My Pen"})
Include required embed Javascript

This plugin does not attach the Javascript required by the embed service, so remember to include it.

Below are the required scripts for each supported service:

codepen

<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>

Config

Configs can be set directly in your markdown as per above examples, or passed in when markdown-it is told to use the plugin, like this:

const md = require('markdown-it')();
md.use(require('markdown-it-code-embed'), {
    user: "yourname"
});

Codepen options

  • class (default = codepen)
  • default_tab (default = result)
  • embed_version (default = 2)
  • height (default = 265)
  • iframe (default = true)
  • slug_hash (default = null)
  • pen_title (default = null)
  • theme_id (default = dark)
  • user (default = null)
  • user_name (default = null)
  • palceholder accepts variables (default =
See the Pen <a href="https://codepen.io/${user}/pen/${slug_hash}/">${pen_title}</a> by ${user_name} (<a href="http://codepen.io/${user}">@${user}</a>) on <a href="http://codepen.io">CodePen</a>.

License

MIT