Mix Github Markdown Language with CSS

Mix Github markdown language with CSS

After GitHub converts Markdown to HTML,

The HTML is sanitized, aggressively removing things that could harm you and your kin—such as script tags, inline-styles, and class or id attributes. See the sanitization filter for the full whitelist.

style tags are not included in GitHub's whitelist, so they are removed. I'm actually surprised that inline style attributes work; they don't seem to be included in the whitelist, either, and are explicitly mentioned in the previous paragraph.

In any case, GitHub does not permit arbitrary HTML to be included in Markdown.

How can I wrap my markdown in an HTML div?

Markdown

For Markdown, This is by design. From the Inline HTML section of the Markdown reference:

Note that Markdown formatting syntax is not processed within block-level HTML tags. E.g., you can’t use Markdown-style emphasis inside an HTML block.

But it is explicitly allowed for span-level tags:

Unlike block-level HTML tags, Markdown syntax is processed within span-level tags.

So, depending on your use-case, you might get away with using a span instead of a div.

CommonMark

If the library you use implements CommonMark, you are lucky. Example 108 and 109 of the spec show that if you keep an empty line in between the HTML block and the markdown code, the contents will be parsed as Markdown:

<div>

*Emphasized* text.

</div>

should work, while the following shouldn't:

<div>
*Emphasized* text.
</div>

And, again according to the same section in the reference, some implementations recognize an additional markdown=1 attribute on the HTML tag to enable parsing of Markdown inside it.

Though it doesn't seem to work in StackOverflow yet:

Testing **Markdown** inside a red-background div.

Have two columns in Markdown

You can't, at least not with pure Markdown as it doesn't have any concept of columns. As explained in the rules:

The idea for Markdown is to make it easy to read, write, and edit prose. HTML is a publishing format; Markdown is a writing format. Thus, Markdown’s formatting syntax only addresses issues that can be conveyed in plain text.

For any markup that is not covered by Markdown’s syntax, you simply use HTML itself.

In fact, the best way would be to have each code block wrapped in a <div> with the appropriate class assigned to each div. However, most Markdown parsers do not parse Markdown inside a raw HTML block. Therefore, you may need to also define the code block in raw HTML as well. Check your parser's list of features to find out. In the event you are not able to define your own CSS to use separately from the Markdown (to style the HTML), you will also need to define the styles inline in the HTML. This question includes a nice sample of what that might look like. Just replace the comments with the appropriate code blocks. If you have to define your code blocks in raw HTML, they would look like this:

<pre><code class="language-c">int foo (void) 
{
    int i;
}
</code></pre>

So, the final document that is sure to work in all (most?) Markdown parsers would look like this:

# Rule 1
Description for rule 1.

<div style="-webkit-column-count: 2; -moz-column-count: 2; column-count: 2; -webkit-column-rule: 1px dotted #e0e0e0; -moz-column-rule: 1px dotted #e0e0e0; column-rule: 1px dotted #e0e0e0;">
    <div style="display: inline-block;">
        <h2>Good</h2>
        <pre><code class="language-c">int foo (void) 
{
    int i;
}
</code></pre>
    </div>
    <div style="display: inline-block;">
        <h2>Bad</h2>
        <pre><code class="language-c">int foo (void) {
    int i;
}
</code></pre>
    </div>
</div>

Note that that uses one of many different ways of defining columns in CSS. Different methods may or may not work in different browsers. YMMV.

Show React code in Github Markdown

Use JSX for the language:

```JSX
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class Child extends Component {
  render() {
    return (
        <p className="App-intro">
          I'm a childish component
        </p>
    );
  }
}

export default Child;
```

Should render correctly

How to add class in image markdown in Ghost?

In plain markdown classes for images are not possible. In some implementations it is possible, e.g. markdown extra uses ![alt](src) {.class}.
I tried it, but in Ghost it is not possible, neither ![alt|img-thumbnail](src). Also no hints in the doku.

But you can use a workaround:

If you use the src as css-attribute!

Just add an 'useless' hash to the URL:

![alt](src#img-thumbnail)

Then you can address this in CSS or JavaScript:

img[src$='#img-thumbnail'] { float:left;}

---

Related Topics