1. juejin-markdown-themes
[![npm](https://badgen.net/npm/v/juejin-markdown-themes)](https://npm.im/juejin-markdown-themes) [![downloads](https://badgen.net/npm/dt/juejin-markdown-themes)](https://npm.im/juejin-markdown-themes)
juejin-markdown-themes
Package: juejin-markdown-themes
Created by: xitu
Last modified: Wed, 13 Dec 2023 06:20:58 GMT
Version: 1.34.0
License: MIT
Downloads: 400
Repository: https://github.com/xitu/juejin-markdown-themes

Install

npm install juejin-markdown-themes
yarn add juejin-markdown-themes

掘金 Markdown 主题

npm downloads

主题预览地址

使用方法

在文章内容前加上 front matter 格式的元信息:

 ---
theme: juejin # Markdown 主题,默认值:juejin
highlight: juejin # 代码高亮主题,默认值:theme 中指定,没有则默认为 juejin
---

Markdown 主题

使用 theme 指定主题

内置主题

主题 License
juejin MIT
github MIT

社区主题

主题 作者 License
smartblue Tusi MIT
cyanosis 林小帅 MIT
channing-cyan ChanningHyl🙌 MIT
fancy 冷石 Boy MIT
hydrogen DawnLck 在掘金 MIT
condensed-night-purple 童欧巴 MIT
greenwillow wangly19 MIT
v-green DawnLck 在掘金 MIT
vue-pro 杭州程序员张张 MIT
healer-readable healer MIT
mk-cute JackySummer MIT
jzman 躬行之 MIT
geek-black 林景宜 MIT
awesome-green luffyZh MIT
orange RudeCrab MIT
scrolls 道道里 MIT
simplicity-green Jason_Guo MIT
arknights viewweiwu MIT
vuepress qgh MIT
Chinese-red Mancuoj MIT
nico 非思不可 MIT
devui-blue DevUI团队 MIT
qklhk-chocolate 巧克力很苦 Apache
serene-rose Krue MIT
z-blue z_ MIT
minimalism 驳是 MIT
koi koi MIT
yu 荣易 MIT
lilsnake 小蛇 MIT
keepnice 这波能反杀 MIT

代码高亮

使用 highlight 指定主题,可以使用 highlight.js 中的所有样式:

如何贡献 Markdown 主题

  1. 使用默认模板创建一个公开的仓库(点击绿色的 Use this template 按钮)
  2. 将其中的 juejin.scss 替换为自己创作的样式,目前支持 Sass,Less 和 CSS
  3. 使用主题开发工具在本地预览主题效果
  4. Fork 此仓库并克隆到本地,在 themes.js 文件中指明样式文件的路径,ref 为 commit hash,highlight 为默认的代码高亮主题(可选)①
  5. README.md 中「社区主题」章节中添加你的主题和作者信息
  6. 提交 pull request (注意:commit 信息要使用 'feat: ' 和 'fix: ' 形式,否则无法触发自动化发布流程)
  7. 提交 PR 前请 rebase,确保 commit 记录的整洁
  8. 如果是修复样式 bug,请在 PR 中给出明确的描述信息
  9. 注意考虑样式的稳定性和兼容性
  10. 并非所有 PR 的主题都会入选,挑选和审核会有一定周期

① themes.js 格式说明

   cyanosis: { // 主题名称
    owner: 'linxsbox', // 作者 github 用户名
    repo: 'juejin-markdown-theme-cyanosis', // 主题仓库名
    path: 'cyanosis.scss', // 主题文件 - 与主题同名
    ref: '6b814ea', // commit hash
    highlight: 'atom-one-dark', // 代码高亮样式名 - 默认 juejin
  }, // 注意格式别忘了逗号

License

联系官方

微信:zwcatfly 或者微信: chnyifan

middle_img_v2_76ee7552-1a63-41df-900d-5fbefe5a69ag

MIT

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin