{"id":21517045,"url":"https://github.com/hagenburger/pimd","last_synced_at":"2025-04-09T21:22:24.071Z","repository":{"id":40841001,"uuid":"133311302","full_name":"hagenburger/pimd","owner":"hagenburger","description":"PIMD – Processing Instructions for Markdown","archived":false,"fork":false,"pushed_at":"2022-12-30T17:14:51.000Z","size":2541,"stargazers_count":20,"open_issues_count":65,"forks_count":5,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-01T12:54:59.879Z","etag":null,"topics":["design-systems","documentation","javascript","livingstyleguide","markdown"],"latest_commit_sha":null,"homepage":"https://hagenburger.github.io/pimd-docs/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hagenburger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"MIT-LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-05-14T05:55:20.000Z","updated_at":"2021-04-22T02:09:03.000Z","dependencies_parsed_at":"2023-01-31T12:15:44.383Z","dependency_job_id":null,"html_url":"https://github.com/hagenburger/pimd","commit_stats":null,"previous_names":[],"tags_count":42,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hagenburger%2Fpimd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hagenburger%2Fpimd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hagenburger%2Fpimd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hagenburger%2Fpimd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hagenburger","download_url":"https://codeload.github.com/hagenburger/pimd/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248112752,"owners_count":21049709,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","documentation","javascript","livingstyleguide","markdown"],"created_at":"2024-11-24T00:32:16.127Z","updated_at":"2025-04-09T21:22:24.052Z","avatar_url":"https://github.com/hagenburger.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# PIMD\n\n![Build status (Travis CI)](https://travis-ci.org/hagenburger/pimd.svg?branch=master)\n![Dependency status (Greenkeeper)](https://badges.greenkeeper.io/hagenburger/pimd.svg)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-prettier-brightgreen.svg)](https://prettier.io)\n\n**P**rocessing **I**nstructions for **M**ark**D**own.\n\nPIMD will be the base for the JavaScript version of [LivingStyleGuide] – an API\nto extend Markdown by DOM manipulations as known from the browsers.\n\n#### Main targets\n\n- Easy to use in JavaScript projects – in build tools and within the browser\n- Focus on extendibility: The [DOM] tree known from the browser will be the main\n  API\n- Compliance with the [CommonMark specs] – Markdown files will render perfectly\n  on GitHub; all additional commands will be CommanMark compliant and won’t\n  leave ugly artifacts when used in `README.md` files on GitHub\n\n[livingstyleguide]: https://github.com/livingstyleguide/livingstyleguide\n[dom]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model\n[commonmark specs]: https://commonmark.org\n\n#### RailsGirls Summer of Code\n\nThis project is as part of [LivingStyleGuide] chosen for the [RailsGirls Summer\nof Code 2018]: Our team is @artnerdnet and @dianavile\n\n[railsgirls summer of code 2018]: https://railsgirlssummerofcode.org\n\n---\n\n## Setup\n\n```sh\nnpm install --save pimd\n```\n\n## Usage\n\n### Render inline\n\n```javascript +highlight=/#/,/Headline/\nconst { Document } = require(\"pimd\")\nconst markdown = `\n# Headline\n`\nconst doc = new Document(markdown)\nconsole.log(doc.render())\n```\n\nResult:\n\n```html +highlight=/\u003c\\/?h1\u003e/g,/Headline/\n\u003ch1\u003e\n  Headline\n\u003c/h1\u003e\n```\n\n### Render document\n\n```javascript +highlight=/#/,/Headline/\nconst { Document } = require(\"pimd\")\nconst markdown = `\n# Headline\n`\nconst doc = new Document(markdown)\ndoc.renderDocument().then(html =\u003e {\n  console.log(html)\n})\n```\n\nResult:\n\n```html +highlight=/\u003c\\/?h1\u003e/g,/Headline/\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003ctitle\u003eHeadline\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003ch1\u003e\n      Headline\n    \u003c/h1\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Plugins\n\nPlugins unleash the full power of PIMD. The official plugins offer functionality\nto create living style guides and to improve code documentation in general.\n\n- [Classes](https://github.com/hagenburger/pimd/tree/master/plugins/classes#readme):\n  Add classes to code blocks or other elements for easy additional styling\n- [ID](https://github.com/hagenburger/pimd/tree/master/plugins/id#readme): Add\n  an ID to code blocks or other elements for easily accessing elements in the\n  HTML preview via JavaScript to bring code examples to live\n- [Preview](https://github.com/hagenburger/pimd/tree/master/plugins/preview#readme):\n  Add an HTML preview to code blocks for pattern libraries/living style guides\n- [Highlight](https://github.com/hagenburger/pimd/tree/master/plugins/highlight#readme):\n  Visually highlight important parts of code blocks in different background\n  colors\n- [Showmore](https://github.com/hagenburger/pimd/tree/master/plugins/showmore#readme):\n  Hide less important parts of code blocks\n- [Prism](https://github.com/hagenburger/pimd/tree/master/plugins/prism#readme):\n  Syntax highlighting with PrismJS\n- [HTML injector](https://github.com/hagenburger/pimd/tree/master/plugins/html-injector#readme):\n  a plugin to create new plugins that manipulate the code blocks (already used\n  by Highlight and Showmore)\n\n## Extending\n\n### Output generated data with JavaScript\n\nPIMD extends Markdown with Processing Instructions known from XML. This is\ncompliant with the [CommonMark specs].\n\n```javascript +highlight=/year/g,/new Date\\(\\).getFullYear\\(\\)/\nconst { Document } = require(\"pimd\")\nconst Config = require(\"pimd/lib/config\")\n\nconst config = new Config()\nconfig.commands[\"year\"] = () =\u003e new Date().getFullYear()\n\nconst markdown = `\n# Year \u003c?year?\u003e\n`\nconst doc = new Document(markdown, config)\nconsole.log(doc.render())\n```\n\nResult:\n\n```html +highlight=\"_\",/2018/\n\u003ch1\u003eYear 2018\u003c/h1\u003e\n```\n\n### Accessing the DOM\n\nPIMD uses the [DOM] internally to provide a well-known API to its users.\n\n```javascript +highlight=/important/g,/background = \"yellow\"/,/style/,/element/g\nconst { Document } = require(\"pimd\")\nconst Config = require(\"pimd/lib/config\")\n\nconst config = new Config()\nconfig.commands[\"important\"] = context =\u003e {\n  context.element.style.background = \"yellow\"\n}\n\nconst markdown = `\n# Headline \u003c?important?\u003e\n`\nconst doc = new Document(markdown, config)\nconsole.log(doc.render())\n```\n\nResult:\n\n```html +highlight=\"_\",/background: yellow/,/style/,/\u003ch1|\u003c\\/h1\u003e|\u003e/g\n\u003ch1 style=\"background: yellow\"\u003eHeadline\u003c/h1\u003e\n```\n\n[dom]: https://developer.mozilla.org/en-US/docs/Glossary/DOM\n\n### Writing plugins\n\n```javascript +highlight=/info/g,/\"Hello world!\"|(?\u003c!\\.)text/g,/div/g,/element/g\nconst { Document } = require(\"pimd\")\nconst Config = require(\"pimd/lib/config\")\n\nconst myPlugin = function(config) {\n  config.addInfoStringCommand(\"info\", { types: [\"string\"] }, function(text) {\n    const div = this.renderer.dom.window.document.createElement(\"div\")\n    div.textContent = text\n    this.element.appendChild(div)\n  })\n}\n\nconst config = new Config()\nconfig.use(myPlugin)\n\nconst markdown = `\n~~~html +info=\"Hello world!\"\n\u003cp\u003eTest\u003c/p\u003e\n~~~\n`\nconst doc = new Document(markdown, config)\nconsole.log(doc.render())\n```\n\nResult:\n\n```html +highlight=\"_\",/Hello world!/g,/\u003cdiv\u003e.+?\u003c\\/div\u003e/g,/\u003cdiv class=\"pimd-example\"\u003e|^\u003c\\/div\u003e/g\n\u003cdiv class=\"pimd-example\"\u003e\n  \u003cdiv class=\"pimd-code\"\u003e\n    \u003cpre\u003e\n      \u003ccode class=\"lang-html\"\u003e\n        \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt;\n      \u003c/code\u003e\n    \u003c/pre\u003e\n  \u003c/div\u003e\n  \u003cdiv\u003eHello world!\u003c/div\u003e\n\u003c/div\u003e\n```\n\nTip: Check out the source code of [PIMD’s official plugins](#plugins) for\nfurther inspiration.\n\n---\n\n## Coding style\n\nPIMD uses the [Prettier] style for all supported documents. To save the\nenvironment, semicolons are not required.\n\n---\n\n## Copyright\n\nCopyright 2018++ [Nico Hagenburger](https://www.hagenburger.net). See\n[MIT-LICENSE](MIT-LICENSE) for details. Get in touch with\n[@hagenburger](https://twitter.com/hagenburger) on Twitter or\n[open an issue](https://github.com/hagenburger/pimd/issues/new).\n\n[prettier]: https://prettier.io\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhagenburger%2Fpimd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhagenburger%2Fpimd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhagenburger%2Fpimd/lists"}