Markdown Themes

使用 precss (- sass like 语法) 与 tailwindcss 开发 Markdown 的丰富主题。

| Theme | 中文 | Author | Preview | |------------------------|-----|-----------------------------------------------------------------------------------------|----------------------------------------------------------------------| | github | - | sindresorhus/github-markdown-css | Preview | | shanchui | 山吹 | #66CCFF | Preview | | shanyue | 山月 | shanyue | Preview | | condensed-night-purple | 凝夜紫 | 童欧巴 | Preview |

Usage

With npm

$ yarn add markdown-theme

通过引入 CSS 使用:

import 'markdown-theme/themes/github.css'

通过引入 JS 使用(以字符串的形式引入):

import 'markdown-theme/dist/github.js'

// 列出所有的 Markdown 主题, name 为所在的文件路径，cn 为其中文名陈
import themes from 'markdown-theme'
{
  "github": {
    "name": "github"
  },
  "shanchui": {
    "name": "shanchui",
    "cn": "山吹"
  },
  "shanyue": {
    "name": "shanyue",
    "cn": "山月"
  },
  "condensed-night-purple": {
    "name": "condensed-night-purple",
    "cn": "凝夜紫"
  },
  "chocolate": {
    "name": "chocolate",
    "cn": "巧克力"
  },
  "v-green": {
    "name": "v-green",
    "cn": "微绿"
  }
}

With CDN

<link href="https://cdn.jsdelivr.net/npm/markdown-theme/themes/github.css" rel="stylesheet">

开发一个主题

1. npm run watch 监听文件变动，并在另外一个终端 npm run dev 启动服务
2. 使用 sass-like 的语法和 tailwindcss 开发 CSS 主题，并把该文件保存在 src 目录下
3. 在浏览器输入 http://localhost:5000#THEME_PATH 进行主题预览，其中 THEME_PATH 是你新建的主题文件, eg. http://localhost:5000#github
4. npm run build，生成纯 CSS 及纯 JS 文件
5. 提交一个 PR