mirror of
https://github.com/kuohuanhuan/x-markdown-css.git
synced 2024-11-25 06:18:19 +00:00
Compare commits
13 Commits
v0.0.1-pat
...
39c543c7f6
Author | SHA1 | Date | |
---|---|---|---|
39c543c7f6
|
|||
b383912f30
|
|||
74a4cda9d3
|
|||
13a8c92ebe
|
|||
7e5821b10d
|
|||
a365317c85
|
|||
213ea5f44f
|
|||
5ee77990a6
|
|||
59745590c2
|
|||
17631306a8
|
|||
d8f3f549dc
|
|||
f988a9dddb
|
|||
3f5fc5f93b
|
@ -1,3 +1,5 @@
|
|||||||
|
# EditorConfig <http://editorconfig.org>
|
||||||
|
|
||||||
root = true
|
root = true
|
||||||
|
|
||||||
[*]
|
[*]
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
module.exports = (grunt) ->
|
module.exports = (grunt) ->
|
||||||
# Load Grunt Tasks
|
# Load Grunt Tasks
|
||||||
require('load-grunt-tasks') grunt
|
require('load-grunt-tasks') grunt
|
||||||
|
|
||||||
# Project Configuration
|
# Project Configuration
|
||||||
grunt.initConfig
|
grunt.initConfig
|
||||||
# NPM Package Declare
|
# NPM Package Declare
|
||||||
|
102
README.md
102
README.md
@ -2,29 +2,75 @@
|
|||||||
|
|
||||||
<center>
|
<center>
|
||||||
|
|
||||||
[](https://www.npmjs.com/package/x-markdown-css)
|
[](https://www.npmjs.com/package/x-markdown-css)
|
||||||
[](https://github.com/kuohuanhuan/x-markdown-css/blob/master/package.json)
|
[](https://github.com/kuohuanhuan/x-markdown-css/actions/workflows/ci.yml)
|
||||||
[](https://github.com/kuohuanhuan/x-markdown-css/blob/master/LICENSE)
|
[](https://github.com/kuohuanhuan/x-markdown-css/blob/master/LICENSE)
|
||||||
|
|
||||||
</center>
|
</center>
|
||||||
|
|
||||||
> A simple and customizable markdown CSS stylesheet for everyone.
|
> A simple and customizable markdown CSS stylesheet for everyone.
|
||||||
|
|
||||||
## Requirement
|
|
||||||
|
|
||||||
- Node.js >= 16
|
|
||||||
|
|
||||||
## Browsers Support
|
## Browsers Support
|
||||||
|
|
||||||
According to [.browserslistrc](https://github.com/kuohuanhuan/x-markdown-css/blob/master/.browserslistrc), `x-markdown-css` supports **all browsers support CSS variables.**
|
According to [.browserslistrc](https://github.com/kuohuanhuan/x-markdown-css/blob/master/.browserslistrc), `x-markdown-css` supports **all browsers support CSS variables.**
|
||||||
|
|
||||||
## Install
|
## Usage
|
||||||
|
|
||||||
|
You can use `x-markdown-css` with:
|
||||||
|
|
||||||
|
1. A CDN service:
|
||||||
|
|
||||||
|
- UNPKG: `https://unpkg.com/x-markdown-css@latest/dist/bundle.min.css`
|
||||||
|
- jsDelivr: `https://fastly.jsdelivr.net/npm/x-markdown-css@latest/dist/bundle.min.css`
|
||||||
|
- CDNJS: *Coming soon. **Waiting for you to make `x-markdown-css` [popular enough](https://github.com/cdnjs/packages/blob/master/CONTRIBUTING.md#policy-rules-and-guidelines)**!*
|
||||||
|
|
||||||
|
> *ps. Note that `bundle.css` without `.min` stands for unminified version.*
|
||||||
|
|
||||||
|
2. A CSS (with Node.js) / Sass / SCSS project:
|
||||||
|
|
||||||
|
First, install it with NPM ([PNPM](https://pnpm.io) or [Yarn](https://yarnpkg.com) also works):
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npm i x-markdown-css@latest
|
||||||
|
```
|
||||||
|
|
||||||
|
Then, add it to your `.css` / `.sass` / `.scss` file.
|
||||||
|
|
||||||
|
For example, in CSS / SCSS you do:
|
||||||
|
|
||||||
|
```css
|
||||||
|
@import 'x-markdown-css';
|
||||||
|
```
|
||||||
|
|
||||||
|
> *ps. Note that no path or file extention is required
|
||||||
|
> since the `style` and `sass` field in `package.json` is filled.
|
||||||
|
> Just simply use `'x-markdown-css'` to import it.*
|
||||||
|
|
||||||
|
## Built with
|
||||||
|
|
||||||
|
The following tools and suite libraries made the development of `x-markdown-css` possible:
|
||||||
|
|
||||||
|
- [SCSS](https://sass-lang.com)
|
||||||
|
- [Stylelint](https://stylelint.io)
|
||||||
|
- [Grunt](https://gruntjs.com)
|
||||||
|
- [PostCSS](https://postcss.org)
|
||||||
|
- [cssnano](https://cssnano.co)
|
||||||
|
|
||||||
|
*...and much more.*
|
||||||
|
|
||||||
|
## Development
|
||||||
|
|
||||||
|
### Requirement
|
||||||
|
|
||||||
|
- Node.js >= 16
|
||||||
|
|
||||||
|
### Install
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm i
|
npm i
|
||||||
```
|
```
|
||||||
|
|
||||||
## Build
|
### Build
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
npm run build
|
npm run build
|
||||||
@ -42,44 +88,6 @@ or
|
|||||||
npx grunt build
|
npx grunt build
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
You can use `x-markdown-css` with:
|
|
||||||
|
|
||||||
1. A CDN service:
|
|
||||||
|
|
||||||
- UNPKG: `https://unpkg.com/x-markdown-css@latest/dist/bundle.min.css`
|
|
||||||
- jsDelivr: `https://fastly.jsdelivr.net/npm/x-markdown-css@latest/dist/bundle.min.css`
|
|
||||||
- CDNJS: *Coming soon. **Waiting for you to make `x-markdown-css` [popular enough](https://github.com/cdnjs/packages/blob/master/CONTRIBUTING.md#policy-rules-and-guidelines)**!*
|
|
||||||
|
|
||||||
> *ps. `bundle.css` without `.min` stands for unminified version.*
|
|
||||||
|
|
||||||
2. A Sass / SCSS project
|
|
||||||
|
|
||||||
First, install it with NPM ([PNPM](https://pnpm.io) or [Yarn](https://yarnpkg.com) also works):
|
|
||||||
|
|
||||||
```sh
|
|
||||||
npm i x-markdown-css@latest
|
|
||||||
```
|
|
||||||
|
|
||||||
Then, add it to your Sass / SCSS file (SCSS for example):
|
|
||||||
|
|
||||||
```scss
|
|
||||||
@import 'x-markdown-css';
|
|
||||||
```
|
|
||||||
|
|
||||||
> *ps. No path or file extention is required, just simply use `x-markdown-css` to import it.*
|
|
||||||
|
|
||||||
## Uses
|
|
||||||
|
|
||||||
- [SCSS](https://sass-lang.com)
|
|
||||||
- [Stylelint](https://stylelint.io)
|
|
||||||
- [Grunt](https://gruntjs.com)
|
|
||||||
- [PostCSS](https://postcss.org)
|
|
||||||
- [cssnano](https://cssnano.co)
|
|
||||||
|
|
||||||
*...and much more.*
|
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
PRs, issues and feature requests are welcome!
|
PRs, issues and feature requests are welcome!
|
||||||
|
2
package-lock.json
generated
2
package-lock.json
generated
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "x-markdown-css",
|
"name": "x-markdown-css",
|
||||||
"version": "0.0.1-patch.2",
|
"version": "0.0.1-patch.3",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "x-markdown-css",
|
"name": "x-markdown-css",
|
||||||
"version": "0.0.1-patch.2",
|
"version": "0.0.1-patch.3",
|
||||||
"description": "A simple and customizable markdown CSS stylesheet for everyone.",
|
"description": "A simple and customizable markdown CSS stylesheet for everyone.",
|
||||||
"keywords": [
|
"keywords": [
|
||||||
"markdown",
|
"markdown",
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
.markdown-body {
|
.markdown-body {
|
||||||
color: var(--xm-c-general);
|
color: var(--xm-c-regular);
|
||||||
font-family: var(--xm-font-display) !important;
|
font-family: var(--xm-font-display) !important;
|
||||||
pre:not(.shiki, .highlight) {
|
pre:not(.shiki, .highlight) {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
@ -10,7 +10,7 @@
|
|||||||
.highlight {
|
.highlight {
|
||||||
margin: .5rem 0;
|
margin: .5rem 0;
|
||||||
font-size: 1.05rem;
|
font-size: 1.05rem;
|
||||||
font-family: var(--xm-font-mono) !important;
|
font-family: var(--xm-font-code) !important;
|
||||||
line-height: 1.4;
|
line-height: 1.4;
|
||||||
&.shiki-light {
|
&.shiki-light {
|
||||||
background: var(--xm-c-shiki-light) !important;
|
background: var(--xm-c-shiki-light) !important;
|
||||||
@ -28,7 +28,7 @@
|
|||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
transition: border .3s ease-in-out;
|
transition: border .3s ease-in-out;
|
||||||
&:hover {
|
&:hover {
|
||||||
border-bottom: 1px solid var(--xm-c-general);
|
border-bottom: 1px solid var(--xm-c-regular);
|
||||||
}
|
}
|
||||||
code {
|
code {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
@mixin container {
|
@mixin container {
|
||||||
max-width: fit-content;
|
max-width: fit-content;
|
||||||
color: var(--xm-c-general);
|
color: var(--xm-c-regular);
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.75;
|
line-height: 1.75;
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
code {
|
code {
|
||||||
color: var(--xm-c-dark);
|
color: var(--xm-c-deep);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: .875rem;
|
font-size: .875rem;
|
||||||
font-family: var(--xm-font-mono);
|
font-family: var(--xm-font-code);
|
||||||
&::before,
|
&::before,
|
||||||
&::after {
|
&::after {
|
||||||
content: '`';
|
content: '`';
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
a {
|
a {
|
||||||
color: var(--xm-c-darker);
|
color: var(--xm-c-deeper);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
code {
|
code {
|
||||||
|
@ -3,11 +3,11 @@ p {
|
|||||||
margin-bottom: 1.25rem;
|
margin-bottom: 1.25rem;
|
||||||
}
|
}
|
||||||
strong {
|
strong {
|
||||||
color: var(--xm-c-dark);
|
color: var(--xm-c-deep);
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
b {
|
b {
|
||||||
color: var(--xm-c-dark);
|
color: var(--xm-c-deep);
|
||||||
}
|
}
|
||||||
em {
|
em {
|
||||||
color: inherit;
|
color: inherit;
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
h1 {
|
h1 {
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: .875rem;
|
margin-bottom: .875rem;
|
||||||
color: var(--xm-c-darker);
|
color: var(--xm-c-deeper);
|
||||||
font-weight: 800;
|
font-weight: 800;
|
||||||
font-size: 2.25rem;
|
font-size: 2.25rem;
|
||||||
line-height: 1.15;
|
line-height: 1.15;
|
||||||
@ -9,7 +9,7 @@ h1 {
|
|||||||
h2 {
|
h2 {
|
||||||
margin-top: 2rem;
|
margin-top: 2rem;
|
||||||
margin-bottom: 1rem;
|
margin-bottom: 1rem;
|
||||||
color: var(--xm-c-dark);
|
color: var(--xm-c-deep);
|
||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
line-height: 1.35;
|
line-height: 1.35;
|
||||||
|
@ -1,13 +1,18 @@
|
|||||||
$shiki-light: #f8f8f8;
|
// Colors
|
||||||
$shiki-dark: #0e0e0e;
|
$pre: #e5e7eb;
|
||||||
$link-border: hsla(0deg 0 50% / .3);
|
|
||||||
$code: #111827;
|
$code: #111827;
|
||||||
|
$figcaption: #6b7280;
|
||||||
|
$thead: #111827;
|
||||||
$ol-counter: #6b7280;
|
$ol-counter: #6b7280;
|
||||||
$ul-counter: #d1d5db;
|
$ul-counter: #d1d5db;
|
||||||
$hr-border: hsla(0deg 0 50% / .3);
|
|
||||||
$quote-border: hsla(0deg 0 50% / .3);
|
// Border
|
||||||
$figcaption: #6b7280;
|
$link-border: hsla(0deg 0% 50% / .3);
|
||||||
$pre: #e5e7eb;
|
$hr-border: hsla(0deg 0% 50% / .3);
|
||||||
$thead: #111827;
|
$quote-border: hsla(0deg 0% 50% / .3);
|
||||||
$thead-border: #d1d5db;
|
$thead-border: #d1d5db;
|
||||||
$tr-border: #e5e7eb;
|
$tr-border: #e5e7eb;
|
||||||
|
|
||||||
|
// Shiki (code highlight)
|
||||||
|
$shiki-light: #f8f8f8;
|
||||||
|
$shiki-dark: #0e0e0e;
|
||||||
|
@ -1,5 +1,8 @@
|
|||||||
|
// Font stack
|
||||||
$font-sans: 'Open Sans', 'Inter', 'Roboto', 'Helvetica', 'Arial', 'Sarasa Gothic TC', 'Sarasa Gothic SC', 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', 'Microsoft YaHei', -apple-system, sans-serif;
|
$font-sans: 'Open Sans', 'Inter', 'Roboto', 'Helvetica', 'Arial', 'Sarasa Gothic TC', 'Sarasa Gothic SC', 'Noto Sans TC', 'Noto Sans SC', 'Microsoft JhengHei', 'Microsoft YaHei', -apple-system, sans-serif;
|
||||||
$font-serif: 'Merriweather', 'Georgia', 'Times New Roman', 'Times', 'Source Han Serif Traditional Chinese', 'Source Han Serif Simplified Chinese', 'Noto Serif TC', 'Noto Serif SC', serif;
|
$font-serif: 'Merriweather', 'Georgia', 'Times New Roman', 'Times', 'Source Han Serif Traditional Chinese', 'Source Han Serif Simplified Chinese', 'Noto Serif TC', 'Noto Serif SC', serif;
|
||||||
$font-mono: 'DM Mono', 'Fira Code', 'Jetbrains Mono', 'Input Mono', 'Menlo', 'MesloLGS NF', 'Ubuntu', monospace;
|
$font-mono: 'DM Mono', 'Fira Code', 'Jetbrains Mono', 'Input Mono', 'Menlo', 'MesloLGS NF', 'Ubuntu', monospace;
|
||||||
|
|
||||||
|
// Font defaults
|
||||||
$font-display: var(--xm-font-sans);
|
$font-display: var(--xm-font-sans);
|
||||||
|
$font-code: var(--xm-font-mono);
|
||||||
|
@ -1,3 +0,0 @@
|
|||||||
$general: #bbb;
|
|
||||||
$dark: #ddd;
|
|
||||||
$darker: #fff;
|
|
@ -1,3 +0,0 @@
|
|||||||
$general: #555;
|
|
||||||
$dark: #222;
|
|
||||||
$darker: #000;
|
|
3
src/scss/variables/modes/_dark.scss
Normal file
3
src/scss/variables/modes/_dark.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
$regular: #bbb;
|
||||||
|
$deep: #ddd;
|
||||||
|
$deeper: #fff;
|
3
src/scss/variables/modes/_light.scss
Normal file
3
src/scss/variables/modes/_light.scss
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
$regular: #555;
|
||||||
|
$deep: #222;
|
||||||
|
$deeper: #000;
|
@ -2,8 +2,9 @@
|
|||||||
|
|
||||||
@use 'variables/constants';
|
@use 'variables/constants';
|
||||||
@use 'variables/colors';
|
@use 'variables/colors';
|
||||||
@use 'variables/light';
|
|
||||||
@use 'variables/dark';
|
@use 'variables/modes/light';
|
||||||
|
@use 'variables/modes/dark';
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@each $name, $val in module-variables('constants') {
|
@each $name, $val in module-variables('constants') {
|
||||||
|
Reference in New Issue
Block a user