Skip to main content

Build Your Own Markdown To PDF Editor

This challenge is to build your own tool to convert markdown to PDF. It could be an online tool, a command line tool or an offline tool with a GUI. The choice is yours.

Markdown is a lightweight markup language designed for creating formatted text using a plain-text editor. It is easy to learn and widely used for writing content that can be converted to other formats. You’ll see it widely used on GitHub for example.

Introduction To Markdown​

Why do I like markdown? There’s four main reasons.

  1. Simple Syntax: Uses plain text symbols like #, *, and [] for formatting.
  2. Readable Source: The plain text is easy to read, even without rendering.
  3. Portable: Works across various platforms and tools.
  4. Easy To Version Control: As it’s plain text we can easily store it in a VCS and get clear, useful diffs.

What are the common use cases for markdown?

  1. Documentation: Writing README files for software projects (e.g., GitHub).
  2. Web Content: Creating blog posts, static site content, or articles.
  3. Notes: Writing quick, well-formatted notes or to-do lists.
  4. Presentations: There are a number of tools that will allow you to create presentations in markdown.

I’m a big user of markdown, the Coding Challenges website and the Programming Projects website are both predominantly written in markdown which is then converted to HTML/JavaScript by the tools (static site generators) used to build the sites. I also write all my courses in markdown allowing them to be stored in git repositories and versioned just like my code.

The Challenge - Building A Markdown To PDF Editor​

In this coding challenge we’re going to build a tool that allows the user to:

  1. Edit markdown in a text editing window.
  2. Preview the rendered markdown in a separate window.
  3. Customise the rendering.
  4. Export the rendered document as a PDF.

Most software developers should be familiar with markdown, but just in case here’s a very brief recap.

Basic Syntax:

  • Headings: Use # for headings:

    # Heading 1
    ## Heading 2
    ### Heading 3

  • Bold: Surround text with ** or __:

    **Bold Text**

  • Italic: Surround text with * or _:

    *Italic Text*

  • Lists:

    • Unordered: Use -, or +:
    - Item 1
    - Item 2

    • Ordered: Use numbers:

      1. First item
      2. Second item

  • Links: [Link Text](URL):

    [Coding Challenges](https://codingchallenges.fyi/)

  • Images: ![Alt Text](Image URL):

    ![Coding Challenges Logo](https://codingchallenges.fyi/images/logo.png)

  • Code:

    • Inline: Surround with backticks: `code`
    • Block: Use triple backticks: ```code```

Step Zero​

Coding Challenges like the majority of common programming languages is zero based, we start with Step Zero!

For this step please setup your IDE / editor of choice and programming language of choice. Then create a GitHub, GitLab, or VCS repo of your choice and create a README.md for you solution to this coding challenge. Write a quick overview of the challenge and how to use your solution in the README.md in markdown!

Step 1​

In this step your goal is to create a window (in the broadest sense as far a user interfaces go) in which the user can edit their markdown.

If you’re doing this as a web, mobile or GUI application, make it a text area or equivalent. If you’re building this coding challenge as a command line tool either allow the user to specify a source file, or if you prefer to go all out, consider building your own text editor.

Step 2​

In this step your goal is to allow the user to preview the rendered markdown in a separate window. That might look something like this:

md-to-pdf.png.png

For a command line tool you could offer a preview as HTML and launch it in the browser or simply render it on the command line. If you need inspiration check out Glow.

Step 3​

In this step your goal is to allow the user to customise the rendering of the document. Let them select the font, the font sizes for the headings and text, the background colour of the document and anything else you think would be reasonably useful.

Step 4​

In this step your goal is to allow the user to export the rendered document as a PDF. The PDF should look just like the preview.

Going Further​

how to take this further:

  • Allow export as HTML, MS Word, Latex.
  • Allow different page sizes for the PDF, i.e. Letter, A4, etc.

Help Others by Sharing Your Solutions!​

If you think your solution is an example other developers can learn from please share it, put it on GitHub, GitLab or elsewhere. Then let me know - ping me a message on the Discord Server, via Twitter or LinkedIn or just post about it there and tag me. Alternately please add a link to it in the Coding Challenges Shared Solutions Github repo.

Get The Challenges By Email​

If you would like to receive the coding challenges by email, you can subscribe to the weekly newsletter on SubStack here: