Styling

The Evernote plugin converts your markdown to HTML before storing the note in Evernote. The generated HTML cannot contain <style> elements, links to CSS files, id attributes nor class attributes, due to limitations of Evernote itself (see Evernote's docs).

Nevertheless, the plugin can inline CSS styles for some elements as dictated by the inline_css setting.

The inline_css setting is a dictionary mapping element names to styles. Here's an example:

"inline_css": {
    "pre": "color: #000000; font-family: monospace,monospace; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; border: 1px solid #cccccc; border-radius: 3px; overflow: auto; padding: 6px 10px; margin-bottom: 10px;",
    "code": "color: black; font-family: monospace,monospace; font-size: 0.9em;",
    "inline-code": "color: #000000; font-family: monospace,monospace; padding: 0.1em 0.2em; margin: 0.1em; font-size: 85%; background-color: #F5F5F5; border-radius: 3px; border: 1px solid #cccccc;",
    "h1": "margin-bottom: 1em; margin-top: 1.2em;",
    "footnotes": "border-top: 1px solid #9AB39B; font-size: 80%;",
    "hr": "color:#9AB39B;background-color:#9AB39B;height:1px;border:none;",
    "sup": "color:#6D6D6D;font-size:1ex",
    "blockquote": "border-left: .5ex solid #BFBFBF; margin-left: 0px; padding-left: 1em; margin-top: 1.4285em; margin-bottom: 1.4285em;",
    // ONLY USED IF wiki_tables or gfm_tables are enabled
    "table": "border-collapse: collapse; border-spacing: 0; margin: 1em;",
    "td": "border: 1px solid #DDD; padding: 6px 13px;",
    "th": "border: 1px solid #DDD; padding: 6px 13px;",
    "tr:odd": "border: 1px solid #DDD; padding: 6px 13px;",
    "tr:even": "border: 1px solid #DDD; padding: 6px 13px; background-color: #F8F8F8;"
}

Currently the only elements that can be styled in this way are:

• body for the full note (from version 2.7.0)
• pre
• code this is the style for code elements within a pre element (blocks)
• inline-code this is the style for inline code elements
• h1..h6
• hr
• sup
• blockquote

Notably, p cannot be customised at the moment.

These are only applied to markdown generated using the Wiki or GFM tables syntax (if wiki_tables or gfm_tables are set to true):

• table
• td
• th (only for gfm_tables)
• tr:odd (pseudo element for odd rows)
• tr:even (pseudo element for even rows)

Additionally footnotes can be associated to some style for the div containing the footnotes at the end of the note.

Note: there are plans to extend this list to include p for example. You can post an issue if you feel some important element is missing.

A Note On Code Styling

The style for pre and code is set both by the one in the inline_css setting and by pygments if highlighting is enabled. In particular, the background is set by pygments after the inline_css style is installed so to overrule it you need to append !important to the relevant style, as done in the example above.

Note: the pre and code styles in inline_css are applied to code blocks. To customise inline code use the inline-code key in inline_css.

Ad-Hoc Styling

The markdown of a note can contain (almost) arbitrary HTML blocks so if a special styling is needed for a specific section a div can be used, e.g.:

<div markdown="1" style="background-color: #ffbcad; border-left: 5px solid #CC0000; margin: 1em 0 1em 0; padding: 1ex 1em 1ex 1em;">

**DANGER**:

Killer rabbit!

</div>

See Supported Markdown#raw-html for more details.