Markdown-preview-enhanced: how to get black preview style ?

Created on 29 Jul 2016  ·  3Comments  ·  Source: shd101wyy/markdown-preview-enhanced

image
The h1 --> font color can not default.

Most helpful comment

Hi @yushukk ,

This package by default is using github style.
If your Atom editor is currently in black style, then you can open Settings View, find Markdown Preview Enhanced package, then enter Settings. You need to disable Use Github.com style. Then the preview style will be consistent with your Atom editor style.

screen shot 2016-07-29 at 5 26 46 pm


Another way is to customize css. However, this method is more complicated.
You can cmd+shift+p then choose Markdown Preview Enhanced: Customize Css.
It will open style.less for you.
Then you can edit .markdown-preview-enhanced-custom section like this:

/*
 * markdown-preview-enhanced custom style
 */
.markdown-preview-enhanced-custom {
  // please write your custom style here
  // eg:
  //  color: blue;          // change font color
  //  font-size: 14px;      // change font size
  //

  background-color: black;  // your background color
  color: white;                       // your font color

  h1, h2, h3, h4, h5, h6, span {
    color: white;                     // your font color
  }

  // custom pdf output style
  @media print {
    font-size: 13px;
  }
}

Hope this helps ;)

All 3 comments

Hi @yushukk ,

This package by default is using github style.
If your Atom editor is currently in black style, then you can open Settings View, find Markdown Preview Enhanced package, then enter Settings. You need to disable Use Github.com style. Then the preview style will be consistent with your Atom editor style.

screen shot 2016-07-29 at 5 26 46 pm


Another way is to customize css. However, this method is more complicated.
You can cmd+shift+p then choose Markdown Preview Enhanced: Customize Css.
It will open style.less for you.
Then you can edit .markdown-preview-enhanced-custom section like this:

/*
 * markdown-preview-enhanced custom style
 */
.markdown-preview-enhanced-custom {
  // please write your custom style here
  // eg:
  //  color: blue;          // change font color
  //  font-size: 14px;      // change font size
  //

  background-color: black;  // your background color
  color: white;                       // your font color

  h1, h2, h3, h4, h5, h6, span {
    color: white;                     // your font color
  }

  // custom pdf output style
  @media print {
    font-size: 13px;
  }
}

Hope this helps ;)

think you for answer

I will close the issue now

Was this page helpful?
0 / 5 - 0 ratings

Related issues

adamaltmejd picture adamaltmejd  ·  5Comments

oneone1995 picture oneone1995  ·  5Comments

xu4wang picture xu4wang  ·  5Comments

siriuscc picture siriuscc  ·  3Comments

AdexoMing picture AdexoMing  ·  3Comments