Blockquotes and Code Blocks are not rendered

[TonyLim]

The first picture below is from DTTG. Blockquotes, Code Blocks and Fenced Code Blocks are rendered correctly.

The second picture below is from DT. Markdown text on the left. Preview on the right. As you can see, somehow, the Blockquotes, Code Blocks and Fenced Code Blocks are not rendered.

How can I fix this?

[chrillek]

Everything is rendered, just differently. If you want it to look exactly the same, you have to use the same CSS on all platforms.
Search for “CSS markdown“ in the forum to find a series of posts in this issue.

[TonyLim]

I didn’t define any CSS in DT or DTTG. I would like the look of DTTG. Where can I copy this DTTG default CSS to DT?

[chrillek]

There doesn’t seem an obvious way to get at the CSS in DTTG. So, your best chance is probably to rebuild it for DT.

[cgrunenberg]

@TonyLim

I didn’t define any CSS in DT or DTTG.

Definitely no stylesheet used in Preferences > Files > Markdown and Preferences > Web? By default the rendered blockquotes look similar to the one in the edit pane, assuming that you’re using the latest version 3.8.7.

[TonyLim]

My bad. I forgot that I have the following CSS in Preferences > Files > Markdown. I cannot even remember what was it for. I don’t really understand CSS.

figure {
  border: 1px #cccccc solid;
  padding: 4px;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0px;
  margin-right: 0px;
}

figcaption {
  background-color: black;
  color: white;
  font-style: italic;
  padding: 2px;
  text-align: center;
}

I have removed it. The settings are now as following:

I have restarted DevonThink. This is the new rendered view. But it is still far from the DTTG’s look. How can I get the Code Blocks rendered like in DTTG or even something like in this post?

[cgrunenberg]

@TonyLim

How can I get the Code Blocks rendered like in DTTG or even something like in this post?

The stylesheets of DEVONthink 3 and DEVONthink To Go are not identical currently, therefore the only option would be to use your own stylesheet. E.g. convert a Markdown document to HTML using DEVONthink To Go and have a look at the styles used by the HTML.

[BLUEFROG]

For a built-in option, you could also enable Settings > Files > Markdown > Prism support and add a supported language at the top of the code block, like so…

And a simple version with no Prism support and internal styling (which could be set in a default external stylesheet as well)…