author: Tetsuaki Baba date: 2026-01-17 institution: Tokyo Metropolitan University email: example@test.com editor: Tetsuaki Baba footer: © 2026 Tetsuaki Baba lisence: This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0).
To create beautiful documents, all you need is to write Markdown text. MarkPaper is a tool that generates beautiful HTML documents suitable for academic papers and technical documents using a custom Markdown parser. It provides rich features including a hamburger menu with table of contents, footnote system, GitHub-style alerts, code blocks, and more.
- MarkPaper Demo: This is a demo that opens the currently viewed README.md file in MarkPaper.
- Real-time Preview Sample: A sample implementation of a split-screen editor with real-time rendering.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>MarkPaper</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TetsuakiBaba/MarkPaper/markpaper.css">
</head>
<body>
<article id="content">Loading...</article>
<script src="https://cdn.jsdelivr.net/gh/TetsuakiBaba/MarkPaper/markpaper.js" crossorigin="anonymous"
type="text/javascript"></script>
</body>
</html>Open the index.html file with a file parameter such as file=your_markdown_file to load the Markdown content. For example, you can use file=index.md in the URL to load the index.md file.
ex.
https://yourdomain.com/path/to/index.html?file=index.md
index.md is the default file that will be loaded if no file parameter is specified.
CDN link to include the script in your HTML:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/TetsuakiBaba/MarkPaper/markpaper.css">
<script src="https://cdn.jsdelivr.net/gh/TetsuakiBaba/MarkPaper/markpaper.js" crossorigin="anonymous" type="text/javascript"></script>
- Responsive Design: Supports mobile to desktop devices
- Hamburger Menu: Access table of contents from the circular menu in the top right
- Auto Table of Contents Generation: Automatically generates TOC from h2 headings
- Extended Markdown Syntax: Rich syntax support including footnotes, alerts, code blocks
You can use MarkPaper as a JavaScript library to convert Markdown to HTML in your own projects. The library exposes a global MarkPaper object and a direct mdToHTML function for convenience.
<script src="markpaper.js"></script>
<script>
// Convert Markdown string to HTML
const markdown = "# Hello World\nThis is **bold** text.";
const html = mdToHTML(markdown);
// or MarkPaper.mdToHTML(markdown);
document.getElementById('your-container').innerHTML = html;
// If you have code blocks, you can add copy buttons
MarkPaper.addCopyButtonFunctionality();
</script>const textarea = document.querySelector('textarea');
const preview = document.querySelector('#preview');
textarea.addEventListener('input', () => {
preview.innerHTML = MarkPaper.mdToHTML(textarea.value);
MarkPaper.addCopyButtonFunctionality();
});- HTML Tag Support: Safe HTML tags with whitelist-based security filtering
- Beautiful Typography: Font settings optimized for Japanese text
# h1 heading
## h2 heading (numbered, displayed in TOC)
### h3 heading (numbered)
#### h4 heading
##### h5 heading# Document Title
author: John Doe
date: 2024-01-15
institution: University of Example
email: john@example.com
footer: © 2024 John Doe. [Project Page](https://example.com)
lisence: This work is licensed under CC BY 4.0Features:
- Displays author information in a beautiful header format
- Supports multiple metadata fields (author, date, institution, email, editor, footer, lisence)
- Automatically formatted with professional typography
- Responsive design for mobile devices
- Custom footer and license support with Markdown syntax
Supported Fields:
author: Author namedate: Publication or creation dateinstitution: Affiliation or organizationemail: Contact email addresseditor: Editor name (displayed as "Edited by...")footer: Custom footer text (supports Markdown links and formatting). If specified, the default MarkPaper generation message will be hidden.lisence: License information displayed at the bottom of the page. If not specified, the following default license is displayed: "This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License (CC BY-NC 4.0)."
**Bold text**
*Italic text*::Title:: This is a paragraph with a title. The title is displayed in bold sans-serif followed by the text.::Title:: This is a paragraph with a title. The title is displayed in bold sans-serif followed by the text.
Features:
- Separate from the main heading hierarchy (#, ##, etc.)
- Ideal for organizing content within a section without cluttering the Table of Contents
- Renders as an inline bold title
* Unordered list item 1
* Unordered list item 2
- Ordered list item 1
- Ordered item 1-1
- Ordered item 1-2
- Deep nested item
- Ordered list item 2
- Ordered item 2-1
- Ordered item 2-2- Unordered list item 1
- Unordered list item 1-2
- Unordered list item 1-2-3
- Unordered list item 1-2
- Unordered list item 2
- Ordered list item 1
- Ordered item 1-1
- Ordered item 1-2
- Deep nested item
- Ordered list item 2
- Ordered item 2-1
- Ordered item 2-2
This is text with a footnote[^1].
[^1]: This is the footnote content.This is text with a footnote1.
Features:
- Footnotes are automatically placed at the end of the corresponding heading section
- Properly managed between sections
- Displayed as clickable links
[Link text](https://example.com)Features:
- Opens in new tab with
target="_blank" - Security support with
rel="noopener noreferrer"
https://example.comFeatures:
- Supports HTTPS, HTTP, and FTP protocols
- No duplicate processing for URLs within existing links
{width="50%"}Features:
- Automatic figure numbering when caption is specified (Figure 1, Figure 2...)
- Width specification with
{width=...}(e.g.,50%,300px) - Responsive design (auto-resize according to screen width)
- Center-aligned display with rounded corners and borders
Example:
{width="50%"}Result: Below is an example of actually displayed image.
| Header 1 | Header 2 |
|----------|----------|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 || Header 1 | Header 2 |
|---|---|
| Cell 1 | Cell 2 |
| Cell 3 | Cell 4 |
| Features: |
- Supports basic table syntax with
|and- - Automatically detects table headers and aligns them
- Supports multi-line cells
- Supports empty cells
> [!NOTE]
> This is an information note.
> Can be written in multiple lines.
> [!WARNING]
> This is a warning message.
> [!IMPORTANT]
> This is important information.
> [!TIP]
> This is a helpful tip.
> [!CAUTION]
> This requires caution.Note
This is an information note. Can be written in multiple lines.
Warning
This is a warning message.
Important
This is important information.
Tip
This is a helpful tip.
Caution
This requires caution.
Features:
- 5 types of alerts (NOTE, WARNING, IMPORTANT, TIP, CAUTION)
- Color coding and icons according to each type
- Multi-line content support
This is an example of `inline code`.Result: This is an example of inline code.
```
function hello() {
console.log("Hello World!");
}
```
Result:
function hello() {
console.log("Hello World!");
}
Features:
- Horizontal scroll support
- Monospace font usage
- GitHub-like styling
> This is a regular blockquote.This is a regular blockquote.
MarkPaper supports safe HTML tags within Markdown content. Only whitelisted tags and attributes are allowed for security.
<strong>HTML strong tag</strong> and <em>HTML em tag</em>
<span style="color: red;">Red text</span>
<div class="custom-class">
Custom div with class
</div>
<small>Small text</small> and <sup>superscript</sup> and <sub>subscript</sub>Result: HTML strong tag and HTML em tag
Red text
Small text and superscript and subscript
You can embed videos and maps from YouTube, Loom, Vimeo, and Google Maps using their standard <iframe> embed codes.
<!-- YouTube Example -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/ALmsa_h8ho8?si=opILE1-bBGZSwmdb" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
<!-- Google Maps Example -->
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3240.8280303808788!2d139.7649361152551!3d35.68123618019432!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60188bfbd89f7153%3A0x413774051f24d351!2z5p2x5Lqs6aeF!5e0!3m2!1sja!2sjp!4v1620000000000!5m2!1sja!2sjp" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>Features:
- Responsive design (automatically fits the content width; videos maintain 16:9 aspect ratio)
- Only trusted domains (YouTube, Loom, Vimeo, Google Maps) are allowed for security
Allowed HTML Tags:
- Text formatting:
strong,b,em,i,u,s,del,ins,mark,small,sub,sup - Structure:
div,span,p,br,hr,blockquote - Headings:
h1,h2,h3,h4,h5,h6 - Lists:
ul,ol,li,dl,dt,dd - Tables:
table,thead,tbody,tr,th,td - Links and media:
a,img,iframe - Code:
code,pre - Other:
abbr,cite,q,time
Allowed Attributes:
- General:
class,id,style,title,lang,dir - Links:
href,target,rel - Images/Media:
src,alt,width,height,loading - Video Embedding:
frameborder,allow,allowfullscreen,webkitallowfullscreen,mozallowfullscreen - Tables:
colspan,rowspan - Time:
datetime - Quotes:
cite
Security Features:
- Dangerous tags like
<script>are automatically escaped - Event handlers (
onclick,onload, etc.) are removed javascript:URLs are filtered out- Only safe protocols (
http,https, relative paths) are allowed
Example of filtered content:
<!-- These will be escaped/filtered for safety -->
<script>alert('XSS')</script>
<img src="x" onerror="alert('XSS')">
<a href="javascript:alert('XSS')">Dangerous link</a>You can customize colors and fonts in the :root section of markpaper.css.
By default, it uses a serif font stack optimized for Japanese text, but it can be changed in the body CSS settings.
- Chrome (recommended)
- Firefox
- Safari
- Edge
markpaper/
├── index.html # Main HTML file (auto-renders index.md or ?file=...)
├── index.md # Default Markdown content file
├── markpaper.js # Markdown parser & library
├── markpaper.css # Main stylesheet
├── preview.html # Real-time preview sample
└── README.md # This file
MIT License
This project aims to implement a simple and lightweight Markdown parser with elegant webpage display. It consists only of vanilla JavaScript and CSS without external library dependencies.
- Memory-efficient streaming processing
- Section-based footnote management
- Robust error handling
- Extensible architecture
- Syntax highlighting feature
-
Table syntax support(Completed) -
Document metadata support(Completed) -
Safe HTML tag support(Completed) - Mathematical notation support
- Dark mode support
- Print style optimization
Footnotes
-
Footnotes are automatically placed at the end of the corresponding heading section. ↩