Pimd
PIMD – Processing Instructions for Markdown
Install / Use
/learn @hagenburger/PimdREADME
PIMD
Processing Instructions for MarkDown.
PIMD will be the base for the JavaScript version of LivingStyleGuide – an API to extend Markdown by DOM manipulations as known from the browsers.
Main targets
- Easy to use in JavaScript projects – in build tools and within the browser
- Focus on extendibility: The DOM tree known from the browser will be the main API
- Compliance with the CommonMark specs – Markdown files will render perfectly
on GitHub; all additional commands will be CommanMark compliant and won’t
leave ugly artifacts when used in
README.mdfiles on GitHub
RailsGirls Summer of Code
This project is as part of LivingStyleGuide chosen for the RailsGirls Summer of Code 2018: Our team is @artnerdnet and @dianavile
Setup
npm install --save pimd
Usage
Render inline
const { Document } = require("pimd")
const markdown = `
# Headline
`
const doc = new Document(markdown)
console.log(doc.render())
Result:
<h1>
Headline
</h1>
Render document
const { Document } = require("pimd")
const markdown = `
# Headline
`
const doc = new Document(markdown)
doc.renderDocument().then(html => {
console.log(html)
})
Result:
<html>
<head>
<title>Headline</title>
</head>
<body>
<h1>
Headline
</h1>
</body>
</html>
Plugins
Plugins unleash the full power of PIMD. The official plugins offer functionality to create living style guides and to improve code documentation in general.
- Classes: Add classes to code blocks or other elements for easy additional styling
- ID: Add an ID to code blocks or other elements for easily accessing elements in the HTML preview via JavaScript to bring code examples to live
- Preview: Add an HTML preview to code blocks for pattern libraries/living style guides
- Highlight: Visually highlight important parts of code blocks in different background colors
- Showmore: Hide less important parts of code blocks
- Prism: Syntax highlighting with PrismJS
- HTML injector: a plugin to create new plugins that manipulate the code blocks (already used by Highlight and Showmore)
Extending
Output generated data with JavaScript
PIMD extends Markdown with Processing Instructions known from XML. This is compliant with the CommonMark specs.
const { Document } = require("pimd")
const Config = require("pimd/lib/config")
const config = new Config()
config.commands["year"] = () => new Date().getFullYear()
const markdown = `
# Year <?year?>
`
const doc = new Document(markdown, config)
console.log(doc.render())
Result:
<h1>Year 2018</h1>
Accessing the DOM
PIMD uses the DOM internally to provide a well-known API to its users.
const { Document } = require("pimd")
const Config = require("pimd/lib/config")
const config = new Config()
config.commands["important"] = context => {
context.element.style.background = "yellow"
}
const markdown = `
# Headline <?important?>
`
const doc = new Document(markdown, config)
console.log(doc.render())
Result:
<h1 style="background: yellow">Headline</h1>
Writing plugins
const { Document } = require("pimd")
const Config = require("pimd/lib/config")
const myPlugin = function(config) {
config.addInfoStringCommand("info", { types: ["string"] }, function(text) {
const div = this.renderer.dom.window.document.createElement("div")
div.textContent = text
this.element.appendChild(div)
})
}
const config = new Config()
config.use(myPlugin)
const markdown = `
~~~html +info="Hello world!"
<p>Test</p>
~~~
`
const doc = new Document(markdown, config)
console.log(doc.render())
Result:
<div class="pimd-example">
<div class="pimd-code">
<pre>
<code class="lang-html">
<p>Test</p>
</code>
</pre>
</div>
<div>Hello world!</div>
</div>
Tip: Check out the source code of PIMD’s official plugins for further inspiration.
Coding style
PIMD uses the Prettier style for all supported documents. To save the environment, semicolons are not required.
Copyright
Copyright 2018++ Nico Hagenburger. See MIT-LICENSE for details. Get in touch with @hagenburger on Twitter or open an issue.
Related Skills
prose
337.3kOpenProse VM skill pack. Activate on any `prose` command, .prose files, or OpenProse mentions; orchestrates multi-agent workflows.
Writing Hookify Rules
83.2kThis skill should be used when the user asks to "create a hookify rule", "write a hook rule", "configure hookify", "add a hookify rule", or needs guidance on hookify rule syntax and patterns.
Command Development
83.2kThis skill should be used when the user asks to "create a slash command", "add a command", "write a custom command", "define command arguments", "use command frontmatter", "organize commands", "create command with file references", "interactive command", "use AskUserQuestion in command", or needs guidance on slash command structure, YAML frontmatter fields, dynamic arguments, bash execution in commands, user interaction patterns, or command development best practices for Claude Code.
MCP Integration
83.2kThis skill should be used when the user asks to "add MCP server", "integrate MCP", "configure MCP in plugin", "use .mcp.json", "set up Model Context Protocol", "connect external service", mentions "${CLAUDE_PLUGIN_ROOT} with MCP", or discusses MCP server types (SSE, stdio, HTTP, WebSocket). Provides comprehensive guidance for integrating Model Context Protocol servers into Claude Code plugins for external tool and service integration.
