Best way to style markdown

Question

I used Jekyll on our website to layout the site using GitHub pages. Works great. One problem was that markdown tables wouldn't be laid out correctly. Found that there is no default style for tables, so unless you explicitly specify some styles for the table. The code looks like this:

---
layout: page
permalink: "/membership/join/"
title: Joining the Readium Foundation
---
<style>
.tablelines table, .tablelines td, .tablelines th {
    border: 1px solid black; padding:10px;
    }
</style>

|  Company Type  | Total Company Revenue | Member Dues |
|:-------------:|:-------------:|:------------:|

This works great when used with Jekyll. But when similar code is used on the GitHub Wiki for the same repos, the tag, and its contents are rendered too. Code for that looks like:

<style>
.tablelines table, .tablelines td, .tablelines th {
    border: 1px solid black; padding:10px;
    }
</style>

|  Publication  | URL | Langauge |
|:-------------:|:-------------:|:------------:|
| epubsecrets  | [http://epubsecrets.com/](http://epubsecrets.com/) | English |

The table is rendered fine but the style tag gets rendered as text.

Suggestions? Some way to hide the style tag?

Additionally I found this question/answer which suggested this code addition:

(setq markdown-xhtml-header-content
"<style>
    .tablelines table, .tablelines td, .tablelines th {
    border: 1px solid black; padding:10px;
    }
</style>")

Unfortunately, it doesn't work - at least not on the GitHub Wiki.

Answer 1

I agree with Waylan... just override the Jekyll defaults in your stylesheet. Add this code to your custom style.css:

body .tablelines table, 
body .tablelines td, 
body .tablelines th {
    border: 1px solid black; padding:10px;
}

I added 'body' to the CSS rules in an attempt to improve specificity. Inserting CSS in the content is not desirable.