React-markdown: Code and blockquotes not displaying as expected

[AlexLerman]

I could just be doing something wrong, but this is how the live demo text gets displayed in my app:

The code while code like is missing the box and the coloring
The blockquote is missing the left-hand bar.

looking at the elements, the code element is very different in my page than it is on the demo page:

Mine:

Demo:

My package.json reads:
"react": "^15.2.1",
"react-dom": "^15.1.0",
"react-markdown": "^2.4.2",

Any help would be greatly appreciated! Thanks!

[rexxars]

The default configuration doesn't do any syntax highlighting or styling. This means it's up to the implementer to choose how things should look.

Blockquotes can be easily styled. The demo uses the following CSS, for instance:

blockquote {
    color: #666;
    margin: 0;
    padding-left: 3em;
    border-left: 0.5em #eee solid;
}

The demo uses highlight.js for syntax highlighting through a custom renderer.
See demo/src/code-block.js for how that works, and demo/src/demo.js for how to enable the renderer.

Of course, this approach relies on hljs being loaded into the DOM already.

I also have a repository called react-markdown-examples which includes a better (though more complicated) example of syntax highlighting, using react-lowlight.

[brownbl1]

Thanks for the comments here. Was looking for the same thing. It might make sense to include a note about the examples repo in the main README.

[DCapella]

If it helps anyone who comes here later, if you're using bootstrap, it'll automatically help style it.