How to change the background and text color in the code block?

Duke_Adamonis · October 16, 2018, 5:46pm

Summary

I’m trying to change the background and text color of all code blocks to black and white, respectively.

Based on what I’ve read, the only way to do this is to create a custom Preview Theme. I have successfully walked through the online instructions here: [Doc: Create a Theme], but I can’t figure out how make the changes to the code blocks, can someone point me in the right direction?

I’ve even reviewed the CodeMirror doc but haven’t been able to work it out.

Info

Platform: macOS
Platform version: v10.13.6
App Version: v3.22.4 (3.22.4)

craftzdog · October 17, 2018, 8:43am

Hi Duke,

Happy to help you make a preview theme.
To change the background color of code blocks, please refer to the source code of the default github preview theme:

github.com

inkdropapp/inkdrop-github-preview-theme/blob/master/styles/github-markdown.less#L446


table tr:nth-child(2n) {
  background-color: #f8f8f8;
}


img {
  max-width: 100%;
  box-sizing: content-box;
  background-color: #fff;
}


code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  background-color: rgba(0,0,0,0.04);
  border-radius: 3px;
}


code:before,