8000 Update CSS to fit for VSC · macx/github-markdown-css@134c199 · GitHub
[go: up one dir, main page]
Skip to content

Commit 134c199

Browse files
macxmacx
committed
Update CSS to fit for VSC
1 parent afa5723 commit 134c199

File tree

4 files changed

+32
-56
lines changed

4 files changed

+32
-56
lines changed

‎github-markdown-dark.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
html, body {
2+
padding: 0;
3+
}
4+
5+
.markdown-body {
6+
padding: 1rem 2rem;
7+
}
8+
19
.markdown-body {
210
color-scheme: dark;
311
-ms-text-size-adjust: 100%;

‎github-markdown-light.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
html, body {
2+
padding: 0;
3+
}
4+
5+
.markdown-body {
6+
padding: 1rem 2rem;
7+
}
8+
19
.markdown-body {
210
-ms-text-size-adjust: 100%;
311
-webkit-text-size-adjust: 100%;

‎github-markdown.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
html, body {
2+
padding: 0;
3+
}
4+
5+
.markdown-body {
6+
padding: 1rem 2rem;
7+
}
8+
19
@media (prefers-color-scheme: dark) {
210
.markdown-body {
311
color-scheme: dark;

‎readme.md

Lines changed: 8 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,63 +1,15 @@
1-
# github-markdown-css
1+
# GitHub Markdown Theme for Visual Studio Code
22

3-
> The minimal amount of CSS to replicate the GitHub Markdown style
4-
5-
**The CSS is generated. Contributions should go to [this repo](https://github.com/sindresorhus/generate-github-markdown-css).**
6-
7-
[<img src="https://cloud.githubusercontent.com/assets/170270/5219062/f22a978c-7685-11e4-8316-af25b6c89bc0.png" width="300">](http://sindresorhus.com/github-markdown-css)
3+
This CSS stylesheet allows you to preview markdown files in Visual Studio Code in GitHub's mardown flavour. It is taken from [sindresorhus/github-markdown-css](https://github.com/sindresorhus/github-markdown-css) but optimized for VC.
84

95
## [Demo](https://sindresorhus.com/github-markdown-css)
106

11-
## Install
12-
13-
Download [manually](https://raw.githubusercontent.com/sindresorhus/github-markdown-css/gh-pages/github-markdown.css), from [CDNJS](https://cdnjs.com/libraries/github-markdown-css), or with npm:
14-
15-
```
16-
$ npm install github-markdown-css
17-
```
18-
19-
## Usage
20-
21-
Import the `github-markdown.css` file and add a `markdown-body 8000 ` class to the container of your rendered Markdown and set a width for it. GitHub uses `980px` width and `45px` padding, and `15px` padding for mobile.
7+
## Installation
228

23-
```html
24-
<meta name="viewport" content="width=device-width, initial-scale=1">
25-
<link rel="stylesheet" href="github-markdown.css">
26-
<style>
27-
.markdown-body {
28-
box-sizing: border-box;
29-
min-width: 200px;
30-
max-width: 980px;
31-
margin: 0 auto;
32-
padding: 45px;
33-
}
9+
Open the [User Settings](https://code.visualstudio.com/docs/languages/markdown#_using-your-own-css) and add the following setting:
3410

35-
@media (max-width: 767px) {
36-
.markdown-body {
37-
padding: 15px;
38-
}
39-
}
40-
</style>
41-
<article class="markdown-body">
42-
<h1>Unicorns</h1>
43-
<p>All the things</p>
44-
</article>
11+
```json
12+
"markdown.styles": [
13+
"https://cdn.jsdelivr.net/gh/macx/github-markdown-css/github-markdown.css"
14+
],
4515
```
46-
47-
If you want code syntax highlighted, use GitHub Flavored Markdown rendered from [GitHub's `/markdown` API](https://docs.github.com/en/free-pro-team@latest/rest/reference/markdown).
48-
49-
There are 3 themes provided in this package:
50-
51-
- **github-markdown.css**: (default) Automatically switches between light and dark through [`@media (prefers-color-scheme)`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
52-
- **github-markdown-light.css**: Light-only.
53-
- **github-markdown-dark.css**: Dark-only.
54-
55-
You may know that now GitHub supports more than 2 themes including `dark_dimmed`, `dark_high_contrast` and `colorblind` variants. If you want to try these themes, you can generate them on your own! See next section.
56-
57-
## How
58-
59-
See [`generate-github-markdown-css`](https://github.com/sindresorhus/generate-github-markdown-css) for how it's generated and ability to generate your own.
60-
61-
## Dev
62-
63-
Run `npm run make` to update the CSS.

0 commit comments

Comments
 (0)
0