How to Style Markdown with CSS

Table of Contents

• Series: Awesome Tips about Pandoc and Markdown
• The Problem
• Defining the CSS
• Embedding HTML Code
• Heading Identifiers
• Fenced Code Attributes
• Divs and Spans
• Inline Code Attributes
• Bracketed Spans
• Link Attributes
• Custom CSS for Markdown
• Themes

Series: Awesome Tips about Pandoc and Markdown

---

The Problem

• How can we make come text red in Markdown?
• How Can we add custom CSS style to elements in Markdown?
• The default CSS has no border, how can we add border to table?

Defining the CSS

We can define the following CSS in markdown itself, or for example add it into template in Blogger.

<style>
.red {color: red}
</style>

Embedding HTML Code

We can use any valid HTML code directly in Markdown.

<p class="red">red text</p>

red text

One of the reason to choose Markdown for writing is to focus on the content, not format.

The drawback of this approach is too much html code: prefix, suffix, attributes etc.

In Pandoc, we can easily use attributes to add CSS style to headers, fenced code, div, inline code, bracketed spans, link etc.

Heading Identifiers

###### Red text title {#identifier .red}

Red text title

Fenced Code Attributes

```{.red .numberLines startFrom="1"}
Here is a paragraph.

And another.
```

Here is a paragraph.

And another.

Divs and Spans

::::: {#special .red}
Here is a paragraph.

And another.
:::::

Here is a paragraph.

And another.

Inline Code Attributes

`red text`{.red}

red text

Bracketed Spans

[This is *some red text*]{.red}

This is some red text

Link Attributes

• We can css class, width, height

<style>
.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
![DNCE’s Waving Pug](https://media.giphy.com/media/3oKIPsx2VAYAgEHC12/giphy.gif){.center}

DNCE’s Waving Pug

Custom CSS for Markdown

Blockquotes CSS

• alt

blockquote {
 margin: 0;
 border-left: 3px solid #ccc;
}
blockquote p {
 padding: 15px;
 background: #eee;
 border-radius: 5px;
}
/* blockquote p::before {content: '\201C';}
blockquote p::after {content: '\201D';} */

Table CSS

• Pandoc’s default CSS has no border, we can add the following CSS to add border.

.post-body table {
  border-collapse: collapse;
}
.post-body th, td {
  border: 1px solid black;
}

• center a table by adding <center> markdown_table_here </center>

Themes

• We can also add our own css or change the existing one.
• We can edit blogger’s theme and add the css there so the theme applies to all posts.
• Create truly standalone html files
  • -H fullpath_pandoc.css or –include-in-header=FILE
• Themes to use
  • pandoc.css