主题风格

默认灰色背景颜色的主题风格
可以使用已经存在主题、自定义主题风格风格,但是必须引入对应的主题风格css文件。

行间样式的主题风格的css文件,名称格式为“*-line-numbers”,如下:
https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.css
// Prism.js 提供了多个内置主题,你可以选择一个喜欢的主题并引入对应的 CSS 文件。

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-okaidia.min.css" rel="stylesheet" />
// 如果内置主题无法满足需求,你可以创建自定义主题。创建一个自定义主题只需要定义一个新的 CSS 文件,覆盖 Prism.js 默认的样式。

/* 自定义代码高亮样式 */
code[class*="language-"],pre[class*="language-"] {  font-family: 'Courier New', Courier, monospace; background: #f5f5f5; color: #333; padding: 1em; border-radius: 5px;  }
.token.keyword {  color: #0070d1; font-weight: bold;  }  /* 自定义关键字样式 */
.token.function {  color: #d73a49;  }  /* 自定义函数样式 */
.token.comment {  color: #6a737d; font-style: italic;  }  /* 自定义注释样式 */
.token.string {  color: #032f62;  }  /* 字符串颜色 */
.token.number {  color: #d73a49;  }  /* 数字颜色 */
/* ...你可以继续添加更多自定义样式 */

版权声明:他人将便捷教程网提供的内容与服务用于商业、盈利、广告性目的时,需得注明出处,转载时请附上原文出处链接及本声明。

原文链接:http://jc.bian-jie.cn/search/JC_prism/1/4991.html

点击加入QQ交流群:{{qqQNum}}