├── .gitignore ├── CHANGELOG.md ├── LICENSE ├── README.md ├── components ├── ControlItem.vue ├── FooterBar.vue ├── Home.vue ├── Post.vue ├── ReaderControls.vue └── SideBar.vue ├── helpers ├── postData.js └── utils.js ├── index.js ├── layouts └── Layout.vue ├── package.json └── styles ├── base.styl ├── index.styl ├── layout.styl ├── post.styl └── prism.styl /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 2.3.3 2 | 3 | - Bug fixes 4 | - Add sidebar to homepage 5 | 6 | - 修复了一些bug 7 | - 添加了首页侧边栏 8 | 9 | ## 2.2.2 10 | - little bug fixes 11 | 12 | - 一点bug的修复 13 | 14 | ## 2.2.1 15 | >Significant Updates ! 16 | - Some bug fixes 17 | - Add categories as configurable items 18 | - Code highlighting is now supported! 19 | 20 | - 一些bug的修复 21 | - 将分类添加为可配置项 22 | - 现已支持代码高亮！ 23 | 24 | 25 | ## 2.1.1 26 | 27 | - Add article category 28 | - Toggle sorting method 29 | - Note: Important style update (changed the font-family)! 30 | 31 | - 新增文章分类 32 | - 切换排序方法 33 | - 注意：重要的样式更新(更换了显示的字体)! 34 | 35 | 36 | ## 2.0.1 37 | 38 | - Night mode adaptation 39 | - Show article list 40 | - Back to top 41 | - Some style updates 42 | 43 | - 适配夜间模式 44 | - 展示文章目录 45 | - 回到顶部 46 | - 一些样式更新 47 | 48 | ## 1.2.1 49 | - Add post previous and next 50 | - 添加上一篇和下一篇 51 | 52 | ## 1.2.0 53 | - Refactor the post sort method 54 | - 重构排序方法 55 | 56 | ## 1.1.0 57 | - Sort posts by date 58 | - Post display author and date 59 | - Some style change 60 | 61 | - 根据日期排序 62 | - 展示文章作者以及日期 63 | - 一些样式更新 64 | 65 | ## 1.0.3 66 | >The first version ! 67 | 68 | - Show Markdown files 69 | - Add site title and description 70 | - Add site author name and link 71 | 72 | - 展示 markdown 文件 73 | - 添加标题和描述 74 | - 添加作者名字和个人链接 -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Okarin1 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # vuepress-theme-reading 3 | 4 | [![npm](https://img.shields.io/npm/v/vuepress-theme-reading)](https://www.npmjs.com/package/vuepress-theme-reading) 5 | [![NPM](https://img.shields.io/npm/l/vuepress-theme-reading)](https://github.com/okarin1/vuepress-theme-reading/blob/master/LICENSE) 6 | 7 | ## 简介 8 | 9 | >一款干净极简的 vuepress 主题 ! 10 | 11 | ![preview](https://s2.loli.net/2023/02/07/vrNPOnGLlUhSqY6.png) 12 | Demo： [预览 Demo](https://reading.okarin.cn) 13 | 14 | ## 15 | 16 | 17 | 18 | ## 使用主题 19 | 20 | **注意：当前文件仅为主题的相关代码** ，如果你如果你想使用 reading 主题，可以参考该模板页面进行配置 [(模板地址)](https://github.com/okarin1/reading-project) ，或者直接克隆模板。 21 | 22 | 23 | 24 | ## 主题配置 25 | 26 | 在 `.vuepress/config.js` 之中进行基本的配置 27 | 28 | ```js 29 | module.exports = { 30 | title: 'The Title', // 将会作为标题展示 31 | description: 'Your own description', // 将会在标题下面展示描述 32 | theme: 'reading', 33 | themeConfig: { 34 | author:'Your Name',// 页脚 35 | authorLink: 'https://xxx.com', //点击你的名字的跳转链接 36 | sortMethod:'date'//排序方式（category/date） 37 | } 38 | } 39 | ``` 40 | 41 | ## MarkDown 42 | 43 | - 标题 (需要) 44 | - 日期 (可选) 45 | - 作者 (可选) 46 | - 分类 (可选) 47 | 48 | 请在`.md`文件中提供一个 `title` 标题，它将显示在首页，以及文章标题中。 49 | 50 | 日期 `date`将决定文章在首页的排列顺序 51 | 52 | 作者 `author` 将显示在标题下, 53 | 54 | 分类 `category` 在首页可以将文章按分类排序。 55 | 56 | 57 | 58 | ``` 59 | --- 60 | title: 标题 61 | date: 2022-02-22 62 | author: Okarin 63 | category: 测试 64 | --- 65 | 66 | ## H2 67 | 68 | 在这里进行写作 69 | 70 | ``` 71 | 72 | 73 | --- 74 | 75 | 76 | # vuepress-theme-reading 77 | 78 | [![npm](https://img.shields.io/npm/v/vuepress-theme-reading)](https://www.npmjs.com/package/vuepress-theme-reading) 79 | [![NPM](https://img.shields.io/npm/l/vuepress-theme-reading)](https://github.com/okarin1/vuepress-theme-reading/blob/master/LICENSE) 80 | 81 | 82 | >A clean and minimalist theme for Vuepress ! 83 | 84 | ![preview](https://s2.loli.net/2023/02/07/vrNPOnGLlUhSqY6.png) 85 | 86 | Demo： [Preview Demo](https://reading.okarin.cn) 87 | 88 | ## Write in front 89 | 90 | **Note: The current file is only the code related to the theme**, if you if you want to use this theme, you can refer to the template page for configuration[(emplate address)](https://github.com/okarin1/reading-project), or directly clone the template. 91 | 92 | 93 | ## Use Theme in Vuepress 94 | 95 | If you want to create a new blog using reading. You can follow these steps after setting up the [Vuepress](https://www.vuepress.cn/) environments. 96 | 97 | When you successfully run a vuepress docs, you should have template like this : 98 | ``` 99 | . 100 | ├── docs(you named this file) 101 | │ ├── .vuepress 102 | │ │ │ 103 | │ │ └── config.js 104 | │ │ 105 | │ └── README.md 106 | │ 107 | └── package.json 108 | ``` 109 | 110 | you can modify the theme on `.vuepress/config.js` 111 | 112 | 113 | ```js 114 | module.exports = { 115 | theme: 'reading', 116 | } 117 | ``` 118 | 119 | ## Theme Config 120 | 121 | Some additional settings in `.vuepress/config.js` 122 | 123 | ```js 124 | module.exports = { 125 | title: 'The Title', // will display on the title 126 | description: 'Your own description', // will display under the title 127 | theme: 'reading', 128 | themeConfig: { 129 | author:'Your Name',// will display on the footer 130 | authorLink: 'https://xxx.com', //click your name to this site 131 | sortMethod:'date'//sort method 132 | } 133 | } 134 | ``` 135 | 136 | 137 | ## About Post 138 | 139 | All your `.md` files except `README.md` file will be displayed on the Home page. 140 | 141 | But to prevent errors, please **provide an empty `README.md` file.** 142 | 143 | ## MarkDown 144 | 145 | - title (Required) 146 | - date (Optional) 147 | - author (Optional) 148 | - category(Optional) 149 | 150 | Please provide a `title` heading in the `.md` file, which will be displayed on the front page, as well as in the article title; 151 | 152 | The date `date` will determine the order of the articles on the front page; 153 | 154 | author `author` will be displayed under the title; 155 | 156 | Category `category` will sort the articles by category on the front page. 157 | 158 | ``` 159 | --- 160 | title: This is Title 161 | date: 2022-02-22 162 | author: Okarin 163 | category: test 164 | --- 165 | 166 | ## H2 167 | 168 | Here is the text, if you have to read what I wrote, 169 | congratulations on wasting a precious minute of your life. 170 | 171 | ``` 172 | 173 | -------------------------------------------------------------------------------- /components/ControlItem.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 10 | 11 | 29 | -------------------------------------------------------------------------------- /components/FooterBar.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 29 | 37 | -------------------------------------------------------------------------------- /components/Home.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 49 | 56 | -------------------------------------------------------------------------------- /components/Post.vue: -------------------------------------------------------------------------------- 1 | 23 | 55 | 58 | -------------------------------------------------------------------------------- /components/ReaderControls.vue: -------------------------------------------------------------------------------- 1 | 20 | 21 | 96 | 97 | 146 | -------------------------------------------------------------------------------- /components/SideBar.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 73 | 74 | 110 | -------------------------------------------------------------------------------- /helpers/postData.js: -------------------------------------------------------------------------------- 1 | import { compareDate,compareCategory,formatDate } from "./utils" 2 | 3 | // 过滤博客数据 4 | export function filterPosts(posts) { 5 | posts = posts.filter((item) => item.path !== "/") 6 | return posts 7 | } 8 | 9 | // 按Date排序博客数据 10 | export function sortPostsByDate(posts) { 11 | posts.sort((prev, next) => { 12 | return compareDate(prev, next) 13 | }) 14 | } 15 | 16 | // 按分类博客数据 17 | export function sortPostsByCategory(posts) { 18 | posts.sort((prev, next) => { 19 | return compareCategory(prev, next) 20 | }) 21 | } 22 | 23 | 24 | // 按date分类博客数据 25 | export function categoryPostsByDate(postList, fmt, noDate) { 26 | sortPostsByDate(postList) 27 | let dateArr = [] 28 | const sortList = [] 29 | postList.forEach((res, i) => { 30 | let postTime = postList[i].frontmatter.date 31 | let formatPostTime = formatDate(postTime, fmt) 32 | if (postTime) { 33 | //Order by fmt 34 | categoryPosts(postList, dateArr, sortList, formatPostTime, i) 35 | } else { 36 | //Other No Order 37 | categoryPosts(postList, dateArr, sortList, noDate, i) 38 | } 39 | }) 40 | return sortList 41 | } 42 | 43 | // 按category分类博客数据 44 | export function categoryPostsByCategory(postList,noCategory) { 45 | sortPostsByCategory(postList) 46 | let categoryArr = [] 47 | const sortList = [] 48 | postList.forEach((res, i) => { 49 | let postCategory = postList[i].frontmatter.category 50 | if (postCategory) { 51 | //Order by fmt 52 | categoryPosts(postList, categoryArr, sortList, postCategory, i) 53 | } else { 54 | //Other No Order 55 | categoryPosts(postList, categoryArr, sortList, noCategory, i) 56 | } 57 | }) 58 | sortList.forEach(item=>{ 59 | sortPostsByDate(item.data) 60 | }) 61 | return sortList 62 | } 63 | 64 | // 分类函数 65 | export function categoryPosts(postList, cateArr, sortList, category, i) { 66 | if (cateArr.indexOf(category) === -1) { 67 | sortList.push({ 68 | category, 69 | data: [postList[i]], 70 | }) 71 | cateArr.push(category) 72 | } else { 73 | sortList.forEach((currentValue, index) => { 74 | if (sortList[index].category == category) { 75 | sortList[index].data.push(postList[i]) 76 | } 77 | }) 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /helpers/utils.js: -------------------------------------------------------------------------------- 1 | // 时间格式化 2 | export function formatDate(time, fmt = "yyyy-MM-dd hh:mm:ss") { 3 | const date = new Date(time) 4 | if (/(y+)/.test(fmt)) { 5 | fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length)) 6 | } 7 | let o = { 8 | "M+": date.getMonth() + 1, 9 | "d+": date.getDate(), 10 | "h+": date.getHours(), 11 | "m+": date.getMinutes(), 12 | "s+": date.getSeconds(), 13 | } 14 | for (let k in o) { 15 | if (new RegExp(`(${k})`).test(fmt)) { 16 | let str = o[k] + "" 17 | fmt = fmt.replace(RegExp.$1, RegExp.$1.length === 1 ? str : padLeftZero(str)) 18 | } 19 | } 20 | return fmt 21 | } 22 | 23 | // 添"0"操作 24 | function padLeftZero(str) { 25 | return ("00" + str).substr(str.length) 26 | } 27 | 28 | // 比对时间 29 | export function compareDate(a, b) { 30 | const aDateNum = getTimeNum(a.frontmatter.date) 31 | const bDateNum = getTimeNum(b.frontmatter.date) 32 | if (aDateNum === 0 && bDateNum === 0) return 0 33 | return bDateNum - aDateNum 34 | } 35 | 36 | export function compareCategory(a,b){ 37 | const aDate = (a.frontmatter.category)?1:0 38 | const bDate = (b.frontmatter.category)?1:0 39 | return bDate - aDate 40 | } 41 | 42 | // 获取时间的数字类型 43 | export function getTimeNum(date) { 44 | const dateNum = !date ? 0 : new Date(date).getTime() 45 | return dateNum 46 | } 47 | -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | module.exports = (themeConfig, ctx) => { 2 | return { 3 | // ... 4 | } 5 | } -------------------------------------------------------------------------------- /layouts/Layout.vue: -------------------------------------------------------------------------------- 1 | 19 | 20 | 94 | 97 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vuepress-theme-reading", 3 | "version": "2.3.3", 4 | "description": "Pure Reading Theme for Vuepress", 5 | "main": "index.js", 6 | "repository": "git@github.com:Okarin1/vuepress-theme-reading.git", 7 | "author": "Okarin1 ", 8 | "license": "MIT" 9 | } 10 | -------------------------------------------------------------------------------- /styles/base.styl: -------------------------------------------------------------------------------- 1 | bgColor = #f6f7f9 2 | textColor = #000000 3 | linkColor = #007acc 4 | fontSize = 18px; 5 | fontFamily = "Bitter", 'Hiragino Sans GB', 'Noto Serif SC', serif, monospace; 6 | 7 | body 8 | //display 9 | display flex 10 | flex-direction column 11 | margin 0 12 | padding 0 2% 13 | 14 | //size 15 | height 100vh 16 | 17 | // font 18 | font-size fontSize 19 | font-family fontFamily 20 | line-height 1.4 21 | -webkit-font-smoothing antialiased 22 | -moz-osx-font-smoothing grayscale 23 | 24 | // color 25 | background bgColor 26 | @media (max-width: 600px) 27 | background #fff 28 | color textColor 29 | 30 | html, 31 | body 32 | transition: background-color .2s ease-in-out; 33 | scroll-behavior: smooth 34 | .all-content 35 | transition: background-color .2s ease-in-out; 36 | 37 | 38 | h1, 39 | h2, 40 | h3, 41 | h4, 42 | h5, 43 | h6 44 | margin-top 3rem 45 | 46 | ul, 47 | ol, 48 | dl 49 | margin-bottom 20px 50 | 51 | 52 | a:link 53 | a:visited 54 | color #000 55 | text-decoration none 56 | a:hover 57 | text-decoration underline 58 | 59 | 60 | button, 61 | input, 62 | option, 63 | select, 64 | textarea 65 | font: inherit; 66 | 67 | 68 | button:focus, 69 | input:focus, 70 | textarea:focus 71 | outline: 0; 72 | 73 | img, 74 | video, 75 | canvas, 76 | iframe 77 | max-width 100% 78 | border 0 none 79 | 80 | table 81 | width: 100%; 82 | 83 | table, 84 | th, 85 | td 86 | border: thin solid black 87 | border-collapse collapse 88 | padding: 0.4rem 89 | 90 | hr 91 | text-align center 92 | border 0 93 | 94 | hr:before 95 | content "/////" 96 | hr:after 97 | content attr(data-content) "/////" 98 | 99 | a.header-anchor 100 | font-size 0.85em 101 | float left 102 | margin-left -0.87em 103 | padding-right 0.23em 104 | margin-top 0.125em 105 | opacity 0 106 | &:hover 107 | text-decoration none 108 | 109 | blockquote 110 | color gray 111 | letter-spacing -1px 112 | border thin solid #e8e8e8; 113 | padding 0.75rem 114 | margin 0.75rem 115 | @media (max-width: 600px) 116 | font-size fontSize * 0.8 117 | p 118 | margin 0 119 | 120 | 121 | darkBgColor = #17181a 122 | darkWarpColor = #1f2022 123 | darkTextColor = #cfd2d7 124 | 125 | // 暗黑模式 126 | [data-theme = dark ] 127 | html,body 128 | background-color darkBgColor 129 | .all-content 130 | background-color darkWarpColor 131 | color darkTextColor 132 | box-shadow: none 133 | opacity 0.9 134 | 135 | blockquote 136 | color #fff 137 | opacity 0.5 138 | 139 | pre[class*='language-'] 140 | color darkTextColor 141 | background-color #282c34 142 | 143 | a:link 144 | a:visited 145 | color darkTextColor 146 | a:hover 147 | color #fff 148 | 149 | .readerControls 150 | .readerControls-item 151 | background-color darkWarpColor 152 | box-shadow none 153 | button 154 | color darkTextColor 155 | .home 156 | background: url(https://s1.ax1x.com/2022/06/22/jpK3k9.png) no-repeat; 157 | .catalog 158 | background: url(https://s1.ax1x.com/2022/06/22/jpMrbF.png) no-repeat; 159 | .dark 160 | background: url(https://s1.ax1x.com/2022/06/22/jpMO2t.png) no-repeat; 161 | .top 162 | background: url(https://s1.ax1x.com/2022/06/22/jpQQi9.png) no-repeat; 163 | 164 | @import url('https://fonts.googleapis.com/css?family=Bitter&display=swap'); 165 | @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@500&display=swap'); -------------------------------------------------------------------------------- /styles/index.styl: -------------------------------------------------------------------------------- 1 | @import "./base.styl"; 2 | @import "./post.styl"; 3 | @import "./layout.styl"; -------------------------------------------------------------------------------- /styles/layout.styl: -------------------------------------------------------------------------------- 1 | @import "./base.styl"; 2 | 3 | .all-content 4 | max-width 640px 5 | min-height 100vh 6 | margin 0 auto 7 | padding: 0 6rem 8 | display flex 9 | flex-direction column 10 | background-color #fff 11 | box-shadow: 3px 3px 5px rgba(146, 143, 143, 0.3); 12 | @media (max-width: 600px) 13 | padding: 0 2rem 14 | box-shadow: none 15 | 16 | .reading-content 17 | flex 1 18 | padding 30px 0 40px 0 19 | 20 | .header 21 | margin-top 20px 22 | line-height 0.5 23 | padding-left 0.25rem 24 | 25 | .home-title 26 | font-size fontSize * 2 27 | font-weight 1000 28 | 29 | .home-description 30 | font-size fontSize * 0.9 -------------------------------------------------------------------------------- /styles/post.styl: -------------------------------------------------------------------------------- 1 | @import "./base.styl"; 2 | @import './prism.styl' 3 | 4 | 5 | .post-view 6 | position relative 7 | 8 | .post-head 9 | position relative 10 | margin-bottom 4rem 11 | 12 | .post-info 13 | display flex 14 | flex-flow row nowrap 15 | justify-content space-between 16 | 17 | .post-title 18 | text-align center 19 | font-size fontSize * 2 20 | margin-bottom 10px 21 | line-height 1 22 | 23 | .post-author 24 | text-align center 25 | font-size fontSize * 0.8 26 | 27 | .post-content 28 | p 29 | text-indent 2rem 30 | text-align justify 31 | img 32 | margin-left -2rem 33 | a 34 | color linkColor !important 35 | 36 | pre[class*='language-'] 37 | position relative 38 | overflow-x auto 39 | font-size fontSize * 0.7 40 | padding 1rem 0.75rem 41 | border-radius 3px 42 | background-color #282c34 43 | font-weight bold 44 | 45 | .post-footer 46 | margin-top 4rem 47 | display flex 48 | justify-content space-between 49 | @media (max-width: 600px) 50 | flex-flow column wrap 51 | -------------------------------------------------------------------------------- /styles/prism.styl: -------------------------------------------------------------------------------- 1 | /** 2 | * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML 3 | * Based on https://github.com/chriskempson/tomorrow-theme 4 | * @author Rose Pritchard 5 | */ 6 | 7 | code[class*="language-"], 8 | pre[class*="language-"] { 9 | color: #ccc; 10 | background: none; 11 | font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; 12 | font-size: 1em; 13 | text-align: left; 14 | white-space: pre; 15 | word-spacing: normal; 16 | word-break: normal; 17 | word-wrap: normal; 18 | line-height: 1.5; 19 | 20 | -moz-tab-size: 4; 21 | -o-tab-size: 4; 22 | tab-size: 4; 23 | 24 | -webkit-hyphens: none; 25 | -moz-hyphens: none; 26 | -ms-hyphens: none; 27 | hyphens: none; 28 | 29 | } 30 | 31 | /* Code blocks */ 32 | pre[class*="language-"] { 33 | padding: 1em; 34 | margin: .5em 0; 35 | overflow: auto; 36 | } 37 | 38 | :not(pre) > code[class*="language-"], 39 | pre[class*="language-"] { 40 | background: #2d2d2d; 41 | } 42 | 43 | /* Inline code */ 44 | :not(pre) > code[class*="language-"] { 45 | padding: .1em; 46 | border-radius: .3em; 47 | white-space: normal; 48 | } 49 | 50 | .token.comment, 51 | .token.block-comment, 52 | .token.prolog, 53 | .token.doctype, 54 | .token.cdata { 55 | color: #999; 56 | } 57 | 58 | .token.punctuation { 59 | color: #ccc; 60 | } 61 | 62 | .token.tag, 63 | .token.attr-name, 64 | .token.namespace, 65 | .token.deleted { 66 | color: #e2777a; 67 | } 68 | 69 | .token.function-name { 70 | color: #6196cc; 71 | } 72 | 73 | .token.boolean, 74 | .token.number, 75 | .token.function { 76 | color: #f08d49; 77 | } 78 | 79 | .token.property, 80 | .token.class-name, 81 | .token.constant, 82 | .token.symbol { 83 | color: #f8c555; 84 | } 85 | 86 | .token.selector, 87 | .token.important, 88 | .token.atrule, 89 | .token.keyword, 90 | .token.builtin { 91 | color: #cc99cd; 92 | } 93 | 94 | .token.string, 95 | .token.char, 96 | .token.attr-value, 97 | .token.regex, 98 | .token.variable { 99 | color: #7ec699; 100 | } 101 | 102 | .token.operator, 103 | .token.entity, 104 | .token.url { 105 | color: #67cdcc; 106 | } 107 | 108 | .token.important, 109 | .token.bold { 110 | font-weight: bold; 111 | } 112 | .token.italic { 113 | font-style: italic; 114 | } 115 | 116 | .token.entity { 117 | cursor: help; 118 | } 119 | 120 | .token.inserted { 121 | color: green; 122 | } 123 | --------------------------------------------------------------------------------