A custom-built parser for DrewMark, developed with Vanilla JavaScript — zero dependencies. Parses DrewMark-formatted plain text into standard HTML.
For projects using build tools such as Webpack, Vite, or Rollup.
1. Install Dependencies
npm install drewmark-parser2. Import and Use in Source Code
// Import the Parser
import { drewmarkParser } from 'drewmark-parser';
const content = '# Heading\nThis is a **DrewMark** text.';
const html = drewmarkParser(content); // The actural value is '<h1>Heading<br>This is a <strong>DrewMark</strong> text.</h1>'
// Render the result to the page or process it further
document.getElementById('output').innerHTML = html;For plain HTML pages without a Node.js environment. Once loaded via a <script> tag, the Parser is exposed as a global variable.
1. Download the Library
Download js/drewmark-parser.min.js from this repository into your project directory. You may skip this step if referencing directly via CDN.
2. Include the Script
Choose one of the following two methods:
- Reference the locally downloaded script:
<script src="path/to/drewmark-parser.min.js"></script>- Reference the script directly from CDN (skip the download step):
<script src="https://unpkg.com/drewmark-parser@latest/js/drewmark-parser.min.js"></script>3. Parse Content
<script>
// Define the DrewMark source text
const content = '# Heading\nThis is a **DrewMark** text.';
// Parse the DrewMark source text to '<h1>Heading<br>This is a <strong>DrewMark</strong> text.</h1>' and render it to the page
document.getElementById('output').innerHTML = drewmarkParser(content);
</script>Below is a complete parsing page based on Option 2.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<main>
<div id="source" hidden>
# Heading
This is a DrewMark text containing **bold** and %%italic%% formatting.
</div>
</main>
<!-- Include the DrewMark JS Parser -->
<script src="js/drewmark-parser.min.js"></script>
<script>
// Parse the DrewMark source into '<h1>Heading</h1><p>This is a DrewMark text containing <strong>bold</strong> and <em>italic</em> formatting.</p>' and render it inside <main>
document.getElementsByTagName('main')[0].innerHTML =
drewmarkParser(document.getElementById('source').innerText);
</script>
</body>
</html>drewmarkParser(content, options?)| Parameter | Type | Required | Description |
|---|---|---|---|
content |
string | string[] |
Yes | DrewMark source text |
options |
object |
No | Configuration (see below) |
| Option | Type | Default | Description |
|---|---|---|---|
enable_emoji |
boolean |
false |
Parse emoji syntax (::smile:: 🡒 😄) |
enable_style |
boolean |
false |
Parse style blocks and style attributes |
enhance_codeblock |
boolean |
true |
Append language label + copy button to code blocks |
enhance_progress |
boolean |
true |
Append numeric values after progress bars |
disable_syntax |
string[] |
[] |
Disable specific syntaxes or syntax groups |
// Disable entire groups
drewmarkParser(content, { disable_syntax: ['headings', 'lists', 'embeds'] });
// Disable specific items
drewmarkParser(content, { disable_syntax: ['highlight', 'audio', 'video', 'deflist'] });
// Mixed
drewmarkParser(content, { disable_syntax: ['text-decors', 'table', 'link'] });See the full documentation for all supported syntax names and aliases.
- Full DrewMark syntax support (v1.2.3 spec)
- Compatible with Markdown table and emoji syntax
- No third-party dependencies — pure Vanilla JS
- Lightweight minified build (less than 100kb)
See docs/doc.md for the full API reference.
中文文档: docs/doc-cn.md
- DrewMark (syntax specification)
- DrewMark JS Editor (WYSIWYG editor)
- DrewMark JS Converter (convert between three formats)
MIT