QuickHTML

A simple Markdown to HTML preprocessor that doesn't require any third-party modules.

Quickly generate HTML from Markdown, using Python.

Technologies used

Python
RegEx

QuickHTML
Installation
Usage
Supported syntax
Contributing

File tree

QuickHTML
├ LICENSE                   Project license.
├ quickhtml/                Main module directory.
│ ├ __init__.py             Executed when running the module directly.
│ ├ __main__.py             Ensures Python treats this directory as a package.
│ └ 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.

Installation

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.

Usage

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>'
>>> ...

Supported syntax

Headings

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 1 heading.
`## This is a level 2 heading.`	`<h2>This is a level 2 heading.</h2>`	This is a level 2 heading.
`### This is a level 3 heading.`	`<h3>This is a level 3 heading.</h3>`	This is a level 3 heading.
`#### This is a level 4 heading.`	`<h4>This is a level 4 heading.</h4>`	This is a level 4 heading.
`##### This is a level 5 heading.`	`<h5>This is a level 5 heading.</h5>`	This is a level 5 heading.
`###### This is a level 6 heading.`	`<h6>This is a level 6 heading.</h6>`	This is a level 6 heading.

Alternate heading syntax

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 1 heading.
`This is a level 2 heading. --------------------`	`<h2>This is a level 2 heading.</h2>`	This is a level 2 heading.

Paragraphs

Use a blank line to separate paragraphs.

Markdown HTML Output

Markdown	HTML	Output
This is a paragraph.	`<p>This is a paragraph.</p>`	This is a paragraph.
This is a paragraph. This is another paragraph.	<p>This is a paragraph.</p> <p>This is another paragraph.</p>	This is a paragraph. This is another paragraph.

This
is
a
paragraph.

This is a paragraph.

This is a paragraph.

This is a paragraph.

This is another paragraph.

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

This is a paragraph.

This is another paragraph.

Line breaks

End a line with two or more spaces to create a line break ( ).

Markdown	HTML	Output
This is a paragraph. This is still the same paragraph.	<p>This is a paragraph.<br> This is still the same paragraph.</p>	This is a paragraph. This is still the same paragraph.

Alternatively, the   tag can also be used directly to create line breaks, this is especially useful for adding line breaks in list and blockquote items.

Emphasis

Emphasis can be added by making text bold, italic, or both.

Bold

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.

Italic

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.

Bold and italic

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.

Blockquotes

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> <p>This is a level 1 blockquote.</p> </blockquote>	This is a level 1 blockquote.
> This is a level 1 blockquote. > This is another level 1 blockquote. > This is the third level 1 blockquote.	<blockquote> <p>This is a level 1 blockquote.</p> <p>This is another level 1 blockquote.</p> <p>This is the third level 1 blockquote.</p> </blockquote>	This is a level 1 blockquote. This is another level 1 blockquote. This is the third level 1 blockquote.
>> This is a level 1 blockquote. >> This is a level 2 blockquote. >>> This is a level 3 blockquote.	<blockquote> <p>This is a level 1 blockquote.</p> <blockquote> <p>This is a level 2 blockquote.</p> <blockquote> <p>This is a level 3 blockquote.</p> </blockquote> </blockquote> </blockquote>	This is a level 1 blockquote. This is a level 2 blockquote. This is a level 3 blockquote.
> This is a level 1 blockquote. >> This is a level 2 blockquote. >>> This is a level 3 blockquote. >> This is a level 2 blockquote. > This is a level 1 blockquote.	<blockquote> <p>This is a level 1 blockquote.</p> <blockquote> <p>This is a level 2 blockquote.</p> <blockquote> <p>This is a level 3 blockquote.</p> </blockquote> <p>This is a level 2 blockquote.</p> </blockquote> <p>This is a level 1 blockquote.</p> </blockquote>	This is a level 1 blockquote. This is a level 2 blockquote. This is a level 3 blockquote. This is a level 2 blockquote. This is a level 1 blockquote.
> This is a level 1 blockquote. >> This is a level 2 blockquote. >>> This is a level 3 blockquote. > This is a level 1 blockquote.	<blockquote> <p>This is a level 1 blockquote.</p> <blockquote> <p>This is a level 2 blockquote.</p> <blockquote> <p>This is a level 3 blockquote.</p> </blockquote> </blockquote> <p>This is a level 1 blockquote.</p> </blockquote>	This is a level 1 blockquote. This is a level 2 blockquote. This is a level 3 blockquote. This is a level 1 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   tags directly.

Lists

Items can be organized into ordered and unordered lists.

Ordered 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. 2. This is another level 1 ordered list item. 3. This is the third level 1 ordered list item.	<ol> <li>This is a level 1 ordered list item.</li> <li>This is another level 1 ordered list item.</li> <li>This is the third level 1 ordered list item.</li> </ol>	This is a level 1 ordered list item. This is another level 1 ordered list item. This is the third level 1 ordered list item.
1) This is a level 1 ordered list item. 2) This is another level 1 ordered list item. 3) This is the third level 1 ordered list item.	<ol> <li>This is a level 1 ordered list item.</li> <li>This is another level 1 ordered list item.</li> <li>This is the third level 1 ordered list item.</li> </ol>	This is a level 1 ordered list item. This is another level 1 ordered list item. This is the third level 1 ordered list item.
1. This is a level 1 ordered list item. 1. This is another level 1 ordered list item. 1. This is the third level 1 ordered list item.	<ol> <li>This is a level 1 ordered list item.</li> <li>This is another level 1 ordered list item.</li> <li>This is the third level 1 ordered list item.</li> </ol>	This is a level 1 ordered list item. This is another level 1 ordered list item. This is the third level 1 ordered list item.
82. This is a level 1 ordered list item. 6. This is another level 1 ordered list item. 14. This is the third level 1 ordered list item.	<ol> <li>This is a level 1 ordered list item.</li> <li>This is another level 1 ordered list item.</li> <li>This is the third level 1 ordered list item.</li> </ol>	This is a level 1 ordered list item. This is another level 1 ordered list item. This is the third level 1 ordered list item.
1. This is a level 1 ordered list item. 2. This is another level 1 ordered list item. 1. This is a level 2 ordered list item. 2. This is another level 2 ordered list item. 3. This is the third level 1 ordered list item.	<ol> <li>This is a level 1 ordered list item.</li> <li>This is another level 1 ordered list item.</li> <ol> <li>This is a level 2 ordered list item.</li> <li>This is another level 2 ordered list item.</li> </ol> <li>This is the third level 1 ordered list item.</li> </ol>	This is a level 1 ordered list item. This is another level 1 ordered list item. This is a level 2 ordered list item. This is another level 2 ordered list item. This is the third level 1 ordered list item.
1. This is a level 1 ordered list item. 2. This is another level 1 ordered list item. 1. This is a level 2 ordered list item. 1. This is a level 3 ordered list item. 3. This is the third level 1 ordered list item.	<ol> <li>This is a level 1 ordered list item.</li> <li>This is another level 1 ordered list item.</li> <ol> <li>This is a level 2 ordered list item.</li> <ol> <li>This is a level 3 ordered list item.</li> </ol> </ol> <li>This is the third level 1 ordered list item.</li> </ol>	This is a level 1 ordered list item. This is another level 1 ordered list item. This is a level 2 ordered list item. This is a level 3 ordered list item. This is the third level 1 ordered list item.

Unordered lists

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. - This is another level 1 unordered list item. - This is the third level 1 unordered list item.	<ul> <li>This is a level 1 unordered list item.</li> <li>This is another level 1 unordered list item.</li> <li>This is the third level 1 unordered list item.</li> </ul>	This is a level 1 unordered list item. This is another level 1 unordered list item. This is the third level 1 unordered list item.
- This is a level 1 unordered list item. * This is another level 1 unordered list item. + This is the third level 1 unordered list item.	<ul> <li>This is a level 1 unordered list item.</li> <li>This is another level 1 unordered list item.</li> <li>This is the third level 1 unordered list item.</li> </ul>	This is a level 1 unordered list item. This is another level 1 unordered list item. This is the third level 1 unordered list item.
- This is a level 1 unordered list item. - This is another level 1 unordered list item. - This is a level 2 unordered list item. - This is another level 2 unordered list item. - This is the third level 1 unordered list item.	<ul> <li>This is a level 1 unordered list item.</li> <li>This is another level 1 unordered list item.</li> <ul> <li>This is a level 2 unordered list item.</li> <li>This is another level 2 unordered list item.</li> </ul> <li>This is the third level 1 unordered list item.</li> </ul>	This is a level 1 unordered list item. This is another level 1 unordered list item. This is a level 2 unordered list item. This is another level 2 unordered list item. This is the third level 1 unordered list item.
- This is a level 1 unordered list item. - This is another level 1 unordered list item. - This is a level 2 unordered list item. - This is a level 3 unordered list item. - This is the third level 1 unordered list item.	<ul> <li>This is a level 1 unordered list item.</li> <li>This is another level 1 unordered list item.</li> <ul> <li>This is a level 2 unordered list item.</li> <ul> <li>This is a level 3 unordered list item.</li> </ul> </ul> <li>This is the third level 1 unordered list item.</li> </ul>	This is a level 1 unordered list item. This is another level 1 unordered list item. This is a level 2 unordered list item. This is a level 3 unordered list item. This is the third level 1 unordered list item.

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   tags directly.

Code

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 `word` denoted as code.

Escaping backticks

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 `word` denoted as code.
``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).

Code blocks

Add at least four spaces at the start of each line to denote a section as a code block.

Markdown	HTML	Output
`This is some text denoted as code.`	`<pre><code>This is some text denoted as code.</code></pre>`	`This is some text denoted as code.`

Horizontal Rules

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>`

Links

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.

Adding titles to links

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

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

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.

Formatting the reference

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.

Formatting the 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] [repository-url]:https://github.com/ckc-dev/QuickHTML`	`<a href="https://github.com/ckc-dev/QuickHTML">Click me!</a>`	Click me!
`Go to [GitHub][github-url]'s main page. [github-url]:<https://github.com/>`	`<p>Go to <a href="https://github.com/">GitHub</a>'s main page.</p>`	Go to GitHub's main page.
`[Click me!][repository-url] [repository-url]: 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][github-url]'s main page. [github-url]: <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.

Images

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
`![Tux](https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png)`	`<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png" alt="Tux">`
`![Tux](https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png "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" title="lewing@isc.tamu.edu Larry Ewing and The GIMP, CC0, via Wikimedia Commons">`

Adding links to images

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
`[![Tux](https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png)](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>`
`[![Tux](https://upload.wikimedia.org/wikipedia/commons/thumb/3/35/Tux.svg/256px-Tux.svg.png)](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>`

Escaping characters

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.

Escape sequences

You can use escape sequences when passing strings directly to the convert() function.

Contributing

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.

quickhtml Release 2.0.3

Release 2.0.3 Toggle Dropdown 2.0.17 2.0.16 2.0.15 2.0.14 2.0.13 2.0.12 2.0.11 2.0.10 2.0.9 2.0.8

Documentation