A simple Markdown to HTML preprocessor that doesn't require any third-party modules.
Quickly generate HTML from Markdown, using Python.
This is a project I made purely for educational purposes, with the goal of better understanding text manipulation/pre-processing and regular expressions, (and the process of building, releasing, distributing and maintaining an open source python module) in addition to HTML and Markdown syntax. You can use it if you want to, but there are many better solutions available that I would recommend instead. This project implements most of the basic Markdown syntax, and while it has everything I needed and served me well for my purposes at the time, it's not as complete and reliable as other preprocessors are, since, again, it's just a simple educational project.
With that said, please note that while I may make small changes, such as refactoring code from time to time, I am no longer actively maintaining this project, so open issues may not be resolved unless by pull requests and collaboration from other users. If you would like to contribute to this project, I am more than willing to review and accept pull requests.
- Python
- RegEx
- QuickHTML
- Installation
- Usage
- Supported syntax
- Contributing
QuickHTML
├ LICENSE Project license.
├ quickhtml/ Main module directory.
│ ├ __init__.py Ensures Python treats this directory as a package.
│ ├ __main__.py Executed when running the module directly.
│ └ quickhtml.py Main module file.
├ README.md Project README.
├ setup.py Module setup file.
└ tests/ Contains tests.
├ integration_tests.py Integration tests.
└ unit_tests.py Unit tests.
QuickHTML is a Python module, if Python is not already installed in your system, you can get the latest version here or using a package manager. pip should be installed with Python by default, if not, you can get it here.
QuickHTML can then be installed using pip, by running pip install quickhtml on the command line.
To see how to use QuickHTML directly from the terminal, run python -m quickhtml -h.
To import QuickHTML in Python files, use:
>>> import quickhtml
>>> ...
The convert() function accepts a string, and returns it formatted as HTML:
>>> string = "# This is a level 1 heading."
>>> quickhtml.convert(string)
'<h1>This is a level 1 heading.</h1>'
>>> ...
The convert_file() function accepts a file path, and returns the file content formatted as HTML:
>>> file_path = "./markdown_documents/example_document.md"
>>> quickhtml.convert_file(file_path)
'<p>This is an example document.</p>'
>>> ...
To create a heading, add a number of pound signs (#) before a word or phrase. The number of signs corresponds to the heading level, up to six levels. For example, to create a level three heading, use three pound signs (### This is a level three heading.).
| Markdown | HTML | Output |
|---|---|---|
# This is a level 1 heading. |
<h1>This is a level 1 heading.</h1> |
|
## This is a level 2 heading. |
<h2>This is a level 2 heading.</h2> |
|
### This is a level 3 heading. |
<h3>This is a level 3 heading.</h3> |
|
#### This is a level 4 heading. |
<h4>This is a level 4 heading.</h4> |
|
##### This is a level 5 heading. |
<h5>This is a level 5 heading.</h5> |
|
###### This is a level 6 heading. |
<h6>This is a level 6 heading.</h6> |
Alternatively, add two or more equal (=) or minus signs (-) to the line after the text to create level 1 and level 2 headings, respectively.
| Markdown | HTML | Output |
|---|---|---|
This is a level 1 heading. |
<h1>This is a level 1 heading.</h1> |
|
This is a level 2 heading. |
<h2>This is a level 2 heading.</h2> |
Use a blank line to separate paragraphs.
| Markdown | HTML | Output |
|---|---|---|
This |
<p>This is a paragraph.</p> |
This is a paragraph. |
This is a paragraph. |
<p>This is a paragraph.</p> |
This is a paragraph. This is another paragraph. |
End a line with two or more spaces to create a line break (<br>).
| Markdown | HTML | Output |
|---|---|---|
This is a paragraph. |
<p>This is a paragraph.<br> |
This is a paragraph. |
Alternatively, the <br> tag can also be used directly to create line breaks, this is especially useful for adding line breaks in list and blockquote items.
Emphasis can be added by making text bold, italic, or both.
To make text bold, add two asterisks (**) or underscores (__) before and after a word, phrase, or letter.
| Markdown | HTML | Output |
|---|---|---|
**This is some bold text.** |
<p><strong>This is some bold text.</strong></p> |
This is some bold text. |
This is a __bold__ word. |
<p>This is a <strong>bold</strong> word.</p> |
This is a bold word. |
These are some **b**__o__**l**__d__ letters. |
<p>These are some <strong>b</strong><strong>o</strong><strong>l</strong><strong>d</strong> letters.</p> |
These are some bold letters. |
To make text italic, add an asterisk (*) or underscore (_) before and after a word, phrase, or letter.
| Markdown | HTML | Output |
|---|---|---|
*This is some italic text.* |
<p><em>This is some italic text.</em></p> |
This is some italic text. |
This is an _italic_ word. |
<p>This is an <em>italic</em> word.</p> |
This is an italic word. |
These are some *i*_t_*a*_l_*i*_c_ letters. |
<p>These are some <em>i</em><em>t</em><em>a</em><em>l</em><em>i</em><em>c</em> letters.</p> |
These are some italic letters. |
To make text bold and italic, add three asterisks (***) or underscores (___) before and after a word, phrase, or letter.
| Markdown | HTML | Output |
|---|---|---|
***This is some bold and italic text.*** |
<p><em><strong>This is some bold and italic text.</strong></em></p> |
This is some bold and italic text. |
These are some ___bold and italic___ words. |
<p>These are some <em><strong>bold and italic</strong></em> words.</p> |
These are some bold and italic words. |
These are some ***b***___o___***l***___d___ ***a***___n___***d*** ___i___***t***___a___***l***___i___***c*** letters. |
<p>These are some <em><strong>b</strong></em><em><strong>o</strong></em><em><strong>l</strong></em><em><strong>d</strong></em> <em><strong>a</strong></em><em><strong>n</strong></em><em><strong>d</strong></em> <em><strong>i</strong></em><em><strong>t</strong></em><em><strong>a</strong></em><em><strong>l</strong></em><em><strong>i</strong></em><em><strong>c</strong></em> letters.</p> |
These are some bold and italic letters. |
To create a blockquote, add a number of greater than signs (>) before a paragraph. To nest blockquotes, add a number of signs that is greater or lesser than the last one. For example, a level 1 blockquote (>) followed by a level 2 blockquote (>>).
| Markdown | HTML | Output |
|---|---|---|
> This is a level 1 blockquote. |
<blockquote> |
|
> This is a level 1 blockquote. |
<blockquote> |
|
>> This is a level 1 blockquote. |
<blockquote> |
|
> This is a level 1 blockquote. |
<blockquote> |
|
> This is a level 1 blockquote. |
<blockquote> |
|
At the moment, multiline items, such as multiline paragraphs, are not supported inside blockquotes. This means each line is a new item. To add line breaks in blockquote elements, use <br> tags directly.
Items can be organized into ordered and unordered lists.
To create an ordered list, add a number, followed by a period (.) or closing parenthesis ()), followed by a space before a paragraph. The numbers do not have to be in numerical order. To nest ordered lists, add a number of spaces before the number that is greater or lesser than the last number of spaces. For example, a level 1 ordered list (1.) followed by a level 2 ordered list. ( 1. )
| Markdown | HTML | Output |
|---|---|---|
1. This is a level 1 ordered list item. |
<ol> |
|
1) This is a level 1 ordered list item. |
<ol> |
|
1. This is a level 1 ordered list item. |
<ol> |
|
82. This is a level 1 ordered list item. |
<ol> |
|
1. This is a level 1 ordered list item. |
<ol> |
|
1. This is a level 1 ordered list item. |
<ol> |
|
To create an unordered list, add a minus sign (-), asterisk (*), or plus sign (+), followed by a space before a paragraph. To nest unordered lists, add a number of spaces before the minus sign (-), asterisk (*), or plus sign (+) that is greater or lesser than the last number of spaces. For example, a level 1 unordered list (-) followed by a level 2 unordered list. ( - )
| Markdown | HTML | Output |
|---|---|---|
- This is a level 1 unordered list item. |
<ul> |
|
- This is a level 1 unordered list item. |
<ul> |
|
- This is a level 1 unordered list item. |
<ul> |
|
- This is a level 1 unordered list item. |
<ul> |
|
At the moment, multiline items, such as multiline paragraphs, are not supported inside lists. This means each line is a new item. To add line breaks in list elements, use <br> tags directly.
To denote text as code, add backticks (`) before and after a word or phrase.
| Markdown | HTML | Output |
|---|---|---|
`This is some text denoted as code.` |
<code>This is some text denoted as code.</code> |
This is some text denoted as code. |
This is a `word` denoted as code. |
<p>This is a <code>word</code> denoted as code.</p> |
This is a |
If the word or phrase you want to denote as code includes one or more backticks, you can escape it by using double backticks (``) instead.
| Markdown | HTML | Output |
|---|---|---|
``This is some text denoted as code.`` |
<code>This is some text denoted as code.</code> |
This is some text denoted as code. |
This is a ``word`` denoted as code. |
<p>This is a <code>word</code> denoted as code.</p> |
This is a |
``This code contains `backticks`.`` |
<code>This code contains `backticks`.</code> |
This code contains `backticks`. |
Backticks can also be escaped using a backslash (see escaping characters).
Add at least four spaces at the start of each line to denote a section as a code block.
| Markdown | HTML | Output |
|---|---|---|
|
|
|
To create a horizontal rule, add three or more asterisks (***), minus signs (---), or underscores (___) by themselves on a line.
| Markdown | HTML | Output |
|---|---|---|
*** |
<hr> |
|
--- |
<hr> |
|
___ |
<hr> |
|
**** |
<hr> |
|
----- |
<hr> |
|
______ |
<hr> |
To create a link, enclose the link name in square brackets ([]), followed by the URL enclosed in parentheses (()).
| Markdown | HTML | Output |
|---|---|---|
[Click me!](https://github.com/ckc-dev/QuickHTML) |
<a href="https://github.com/ckc-dev/QuickHTML">Click me!</a> |
Click me! |
Go to [GitHub](https://github.com/)'s main page. |
<p>Go to <a href="https://github.com/">GitHub</a>'s main page.</p> |
Go to GitHub's main page. |
A title can optionally be added to a link, it will appear as a tooltip when the link is hovered. To add a title, enclose it in either single (') or double (") quotes after the URL.
| Markdown | HTML | Output |
|---|---|---|
[Click me!](https://github.com/ckc-dev/QuickHTML "Go to the main page of this repository.") |
<a href="https://github.com/ckc-dev/QuickHTML" title="Go to the main page of this repository.">Click me!</a> |
Click me! |
Go to [GitHub](https://github.com/ 'Click here to go to the main page of GitHub. |
<p>Go to <a href="https://github.com/" title="Click here to go to the main page of GitHub.">GitHub</a>'s main page.</p> |
Go to GitHub's main page. |
Emails and URLs can be quickly turned into links by being enclosed in angle brackets (<>).
| Markdown | HTML | Output |
|---|---|---|
<https://github.com> |
<a href="https://github.com">https://github.com</a> |
https://github.com |
<example@email.address> |
<a href="mailto:example@email.address">example@email.address</a> |
example@email.address |
Reference-style links are made up of two parts: the first part is the link reference, which is used inline with the text, and the second is the link definition, which is stored somewhere else in the document. This makes the document easier to read, especially when containing multiple long links.
The link reference is formatted using two sets of brackets ([]). The first set encloses the text which should appear as a link, and the second set encloses the label of a link definition.
The link definition is formatted using a set of brackets ([]) which encloses the label to this definition, immediately followed by a colon (:), followed by the link URL, which can optionally be enclosed in angle brackets (<>), and finally, optionally followed by a title, which must be enclosed in single quotes (''), double quotes ("") or parentheses (()).
| Markdown | HTML | Output |
|---|---|---|
[Click me!][repository-url] |
<a href="https://github.com/ckc-dev/QuickHTML">Click me!</a> |
Click me! |
Go to [GitHub][github-url]'s main page. |
<p>Go to <a href="https://github.com/">GitHub</a>'s main page.</p> |
Go to GitHub's main page. |
[Click me!][repository-url] |
<a href="https://github.com/ckc-dev/QuickHTML" title="Go to the main page of this repository.">Click me!</a> |
Click me! |
Go to [GitHub][github-url]'s main page. |
<p>Go to <a href="https://github.com/" title="Click here to go to the main page of GitHub.">GitHub</a>'s main page.</p> |
Go to GitHub's main page. |
To add an image, use an exclamation mark (!), followed by the image alt text enclosed in square brackets ([]), followed by the image's path or URL enclosed in parentheses (()). Titles can be optionally added to images, to add a title, enclose it in either single (') or double (") quotes after the URL.
| Markdown | HTML | Output |
|---|---|---|
 |
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png" alt="Tux"> |
 |
 |
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png" alt="Tux" title="lewing@isc.tamu.edu Larry Ewing and The GIMP, CC0, via Wikimedia Commons"> |
|
To add a link to an image, enclose the Markdown for the image in square brackets ([]), then follow with the link enclosed in parentheses (()).
| Markdown | HTML | Output |
|---|---|---|
[](https://commons.wikimedia.org/wiki/File:Tux.svg) |
<a href="https://commons.wikimedia.org/wiki/File:Tux.svg"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png" alt="Tux"></a> |
 |
[](https://commons.wikimedia.org/wiki/File:Tux.svg "lewing@isc.tamu.edu Larry Ewing and The GIMP, CC0, via Wikimedia Commons") |
<a href="https://commons.wikimedia.org/wiki/File:Tux.svg" title="lewing@isc.tamu.edu Larry Ewing and The GIMP, CC0, via Wikimedia Commons"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png" alt="Tux"></a> |
|
Add a backslash (\) before a character to escape it, this is often used to display literal characters that would otherwise be used in Markdown syntax.
| Markdown | HTML | Output |
|---|---|---|
\# Without the backslash, this would be a heading. |
<p># Without the backslash, this would be a heading</p> |
# Without the backslash, this would be a heading |
\- Without the backslash, this would be an unordered list item. |
<p>- Without the backslash, this would be an unordered list item.</p> |
- Without the backslash, this would be an unordered list item. |
You can use escape sequences when passing strings directly to the convert() function.
Pull requests are welcome.
Please open an issue to discuss what you'd like to change before making major changes.
Please make sure to update and/or add appropriate tests when applicable.
This project is licensed under the GPL-3.0 License.