Creating a Developer Checklist in PDF

You can use Markdown to create a check list with code syntax highlighting for command reference.

Convert Markdown to HTML

Convert Markdown to HTML using Markdown to HTML. You can add header and footer to the html template with a place holder for the markdown. First, install markdown-to-html.

npm install markdown-to-html -g

Then, create template.html file in a directory:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>My own title</title>
    <link rel="stylesheet" href="./ghstyle.css">
  </head>
  <body>
    <h3>My own header</h3>
    {markdown}
    <h3>My own footer</h3>
  </body>
</html>

Create the ghstyle.css:

body {
  background-color: White;
  margin-left: 15px;
}
h1 {
  color: maroon;
}
code, div.highlight {
  background-color: MintCream;
  padding-left: -5px;
  margin-left: 5px;
}

div.highlight {
  padding-top: 10px;
  padding-bottom: 10px;
  width: 80%;
}
.p {
  color: Black;
}
.n, .pl-vpf {
  color: Black;
  font-weight: medium;
}
.nf, .pl-enf {
  color: DarkGreen;
}
.nx {
  color: #005B5B;
  font-weight: medium;
}
.o, .pl-ko {
  color: black;
}
.mi, .pl-cn {
  color: Brown;
  font-weight: bold;
}
.k, .pl-s, .pl-k {
  color: DarkSlateBlue;
  font-weight: bold;
}
.kd {
  color: DarkSlate;
  font-weight: bold;
}
.s1 {
  color: Chocolate;
  font-weight: 500;
}
.s2 {
  color: Red;
}
.c, .pl-c {
  color: Orange;
}

You can now run it to convert markdown to html:

markdown myfile.md --template /path/to/template.html

The template is not working for some reason. You can use github style syntax highlight:

github-markdown code-audit.md -f markdown -h | pbcopy

I pasted the markdown in the clipboard to the markdown place holder in the html file. To make this command work, instead of redirecting the output to clipboard, we can redirect it to the file:

github-markdown code-audit.md -f markdown -h > gh-code-audit.html

Instead of manually inserting the html generated from markdown, we can automate file concatenation using cat:

cat header.html gh-code-audit.html footer.html > code-audit.html

Convert HTML to PDF

Install wkhtmltox-0.12.4_osx-cocoa-x86-64 to convert HTML to PDF. Run the wkhtmltopdf to convert the html to pdf:

wkhtmltopdf --zoom 15 out.html out.pdf

This will convert the html to pdf with the syntax highlighting for the code. Next step, add all these steps into a shell script, so we can run it as one command by providing it the arguments.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.