author: Tetsuaki Baba & Rubens Braz
date: 2025-12-10
institution: MarkPaper Project
MarkPaper is a lightweight, client-side tool that transforms standard Markdown into beautiful, academic-style HTML documents. It features a robust parser built with vanilla JavaScript that supports extended syntax, including LaTeX math, syntax highlighting, dynamic diagrams, and responsive embeds.
This document serves as both a User Guide and a Live Demo. Every section below shows the Markdown syntax followed by the rendered result.
Tip
LIVE DEMO
This document is designed to be viewed in MarkPaper. Click the button below to render this README with the full feature set.
To use MarkPaper, include the CSS and JS files in your HTML document. You also need to include PrismJS (for code highlighting) and KaTeX (for mathematics).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>MarkPaper</title>
<meta name="description" content="MarkPaper - Markdown to Clean Paper">
<!-- Favicon -->
<link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon-16x16.png">
<link rel="manifest" href="assets/site.webmanifest">
<!-- MarkPaper -->
<link rel="stylesheet" href="markpaper.css">
<script src="markpaper.js"></script>
<!-- Prism (Code highlighting) -->
<link id="prism-theme-link" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism-themes/1.9.0/prism-ghcolors.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<!-- KaTeX (LaTeX parser) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
</head>
<body>
<main>
<article id="content">
<div class="loading-state">
<div class="spinner"></div>
<p>Loading document...</p>
</div>
</article>
</main>
</body>
<noscript>
<div class="alert alert-warning">
<strong>Warning:</strong> JavaScript is required to run MarkPaper. Please enable it in your browser settings.
</div>
</noscript>
</html>MarkPaper reads the ?file= URL parameter to determine which Markdown file to render.
- Default:
http://127.0.0.1:5500/(loadsreadme.md) - Specific File:
http://127.0.0.1:5500/?file=my-paper.md
At the very top of your Markdown file, you can define metadata. This will automatically generate a professional header.
# MarkPaper Showcase & Documentation
author: Tetsuaki Baba & Rubens Braz
date: 2025-12-10
institution: MarkPaper Project(See the top of this document for the rendered header example)
MarkPaper supports standard Markdown formatting and some extended HTML styling.
# Heading Level 1
## Heading Level 2 (Auto-numbered in TOC)
### Heading Level 3 (Auto-numbered in TOC)
#### Heading Level 4You can use **bold text** for emphasis, *italic text* for nuance, and ~~strikethrough~~ for deletions.
You can also use <mark>highlighted text</mark>, <u>underlined text</u>, <sub>subscript</sub>, and <sup>superscript</sup>.Result:
You can use bold text for emphasis, italic text for nuance, and strikethrough for deletions.
You can also use highlighted text, underlined text, subscript, and superscript.
* **Unordered List Item 1**
* Unordered List Item 2
* Nested Item A
* Nested Item B
1. **Ordered List Item 1**
1. Ordered List Item 2
1. Nested Ordered Item 2.1
1. Nested Ordered Item 2.2
1. Nested Ordered Item 2.2.1
1. Nested Ordered Item 2.2.2Result:
- Unordered List Item 1
- Unordered List Item 2
- Nested Item A
- Nested Item B
- Ordered List Item 1
- Ordered List Item 2
- Nested Ordered Item 2.1
- Nested Ordered Item 2.2
- Nested Ordered Item 2.2.1
- Nested Ordered Item 2.2.2
- [x] Analyze requirements
- [x] Design architecture
- [ ] Write documentationResult:
- Analyze requirements
- Design architecture
- Write documentation
Standard markdown syntax is supported. You can also specify the width using curly braces syntax {width=...}. Captions are automatically generated from the alt text.
{width="50%"}Result:
MarkPaper automatically detects YouTube and Vimeo links when placed on their own line and converts them into responsive iframes.
https://www.youtube.com/watch?v=Xd2xr7zIFyk
https://vimeo.com/858066420Result:
https://www.youtube.com/watch?v=Xd2xr7zIFyk
MarkPaper uses Prism.js for syntax highlighting. It supports copy-to-clipboard functionality and horizontal scrolling.
```javascript
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("MarkPaper"));
```Result:
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet("MarkPaper"));```python
def factorial(n):
if n == 0:
return 1
else:
return n * factorial(n-1)
```Result:
def factorial(n):
if n == 0:
return 1
else:
return n * factorial(n-1)Powered by KaTeX, you can write high-quality mathematical equations directly in Markdown.
The mass-energy equivalence is described by $E = mc^2$.Result: The mass-energy equivalence is described by
Use double dollar signs $$ for display mode equations.
$$
\int_{-\infty}^\infty e^{-x^2} dx = \sqrt{\pi}
$$
$$
M = \begin{pmatrix}
1 & 0 & 0 \\
0 & \cos \theta & -\sin \theta \\
0 & \sin \theta & \cos \theta
\end{pmatrix}
$$Result:
Tables are styled for readability with sticky headers and hover effects.
| ID | Model Name | Accuracy | Status |
| :--- | :--- | :---: | ---: |
| 001 | AlphaNet | 94.5% | **Production** |
| 002 | BetaGrid | 88.2% | *Deprecated* |
| 003 | GammaRay | 99.1% | Testing |Result:
| ID | Model Name | Accuracy | Status |
|---|---|---|---|
| 001 | AlphaNet | 94.5% | Production |
| 002 | BetaGrid | 88.2% | Deprecated |
| 003 | GammaRay | 99.1% | Testing |
Use blockquotes with specific tags to create colorful alert boxes.
> [!NOTE]
> This is a general note. Useful for non-critical information.
> [!TIP]
> **Pro Tip:** Check the hamburger menu in the top right for the Table of Contents.
> [!IMPORTANT]
> This information is crucial for the user to understand.
> [!WARNING]
> Proceed with caution. This action might have side effects.
> [!CAUTION]
> Critical failure possible. Ensure backups are ready.Result:
Note
This is a general note. Useful for non-critical information.
Tip
Pro Tip: Check the hamburger menu in the top right for the Table of Contents.
Important
This information is crucial for the user to understand.
Warning
Proceed with caution. This action might have side effects.
Caution
Critical failure possible. Ensure backups are ready.
Footnotes are automatically collected and displayed at the bottom of the section or page.
Here is a statement that requires a citation[^1].
[^1]: This is the text of the footnote.Result:
Here is a statement that requires a citation1.
MarkPaper supports the HTML tags for hiding complex information.
<details>
<summary><strong>Click to expand technical specs</strong></summary>
* Engine: V8
* Horsepower: 450 hp
* Torque: 500 Nm
</details>Result:
Click to expand technical specs
- Engine: V8
- Horsepower: 450 hp
- Torque: 500 Nm
You can adjust the theme settings via the Settings Button (gear icon) in the top right corner, or by modifying the CSS variables in markpaper.css.
Key CSS Variables:
--text-color--background-color--accent-color--font-serif/--font-sans-serif
MIT License.
Tetsuaki Baba: Site / Original Repository
Rubens Braz: Site / Refactored Repository (this version)
Footnotes
-
This is the text of the footnote. ↩