Trying to get JetPack Markdown with code to play nicely with WordPress

by  on  in code

After a lot of trial and error here’s how I got code in markdown to work in WordPress.

2 plug-ins are required

Smart Syntax for adding class="prettyprint lang-xyz to the <pre> tag

and

Prettify Code Syntax for the most flexible syntax highlighter I have ever found for WordPress.

Finally, go to Settings - Prettify Code Syntax and change the top of the Custom css to this

.prettyprint .com       { color: #008000; }
.prettyprint .str, .tag { color: #A31515; }
.prettyprint .kwd, .atv { color: #0000FF; }
.prettyprint .typ       { color: #2B91AF; }
.prettyprint .lit, .atn { color: #FF0000; }
.prettyprint .pun, .pln { color: #000000; }
.prettyprint .dec       { color: #800080; }

pre.prettyprint, 
code.prettyprint, 
pre.prettyprint code,
.post-content pre.prettyprint,
.post-content code.prettyprint,
.post-content pre.prettyprint code,
.comment-content pre.prettyprint,
.comment-content code.prettyprint,
.comment-content pre.prettyprint code  {
    background-color: #F6F6F6; display: block;
}

It’s ok but there still problems with the <pre> tags being rendered differently between the home page and the individual post page and it shrinks down to almost nothing on a mobile device.