Step-by-step tutorial/guide how to use markdown in Notepad++

Markdown-in-Npp.md

Markdown in Notepad++

Syntax Highlighting

Follow the instructions of this project.

Live Preview

Basic setup

1. Install Python (I tested it with Python 2.7)

   • Make sure you also select pip and Add python to PATH

2. Install the python markdown package:

   1. Open comand prompt: Press [Win] + [R], type cmd and hit [Enter]
   2. Enter pip install markdown
   3. You can close the window after the installation is complete

3. Install the Notepad++ plugin Preview HTML

   1. Download the archive from the link above (v1.3 or higher, the plugin manager downloads the old v1.2.1!)

   2. Extract the archive

   3. Move the file PreviewHTML.dll to C:\Program Files (x86)\Notepad++\plugins (or similar)

   4. (Re)start Notepad++ and select Plugins > Preview HTML > Edit filter definitions

      • If prompted to create a new file, click yes

   5. Add the following code:

      [Markdown]
      Extension=.md
      Language=Markdown
      Command=python -m markdown "%1"

   6. Save the file (make sure it is called filters.ini and not filters.sample.ini)

4. Press [Ctrl] + [Shift] + [H] to open the preview window

With custom stylesheet

1. Do all the steps form the basic setup

2. Create a HTML file with the desired CSS styles defined internally (see example file below)

3. Save the file to %AppData%\Notepad++\plugins\config\PreviewHTML\style.htm

4. Open the filters.ini file and change the Command line to the following:

   Command=cmd /c type "%AppData%\Notepad++\plugins\config\PreviewHTML\style.htm" & python -m markdown "%1"

---

More info

style.htm

<!-- Example style -->
<style>
    body {
        font-size: 12px;
        font-family: Helvetica, Arial;
    }
    h1, h2 {
        border-bottom: 1px solid #DDDDDD;
    }
    pre, code {
        font-family: Consolas, "Liberation Mono", Courier;
        background-color: #F4F4F4;
        border: 1px solid #EAEAEA;
        border-radius: 2px;
    }
    pre {
        overflow: auto;
        overflow-y: hidden;
    }
    pre code {
        border: none;
    }
</style>

Anyone finding this should know that the MarkdownViewer++ plugin is far superior to this method, both in that it is updated live and makes FAR fewer rendering mistakes. I believe this document was last updated in 2016, so it being 2019 shows how outdated this information is.

I believe the majority of the rendering issues are caused by the python markdown parser, the HTML preview plugin actually works great when given a proper markdown conversion from a different parser.