avatar

prism代码高亮主题风格展示阁

前言

如何使用代码高亮插件,之前的教程中已经写过了,在这里我不再说明,接下来给大家展示下代码高亮插件所支持的主题风格有哪些以及各自的展示效果。

我使用的代码高亮主题为: shades-of-purple

代码高亮插件支持的主题风格如下:

  • coy
  • dark
  • funky
  • okaidia
  • solarizedlight
  • tomorrow
  • twilight
  • a11y-dark
  • atom-dark
  • base16-ateliersulphurpool.light
  • cb
  • darcula
  • dracula
  • duotone-dark
  • duotone-earth
  • duotone-forest
  • duotone-light
  • duotone-sea
  • duotone-space
  • ghcolors
  • hopscotch
  • material-dark
  • material-light
  • material-oceanic
  • pojoaque
  • shades-of-purple
  • synthwave84
  • vs
  • xonokai
  • default

以上代码高亮插件所支持的主题,这是再本地调试运行时代码高亮主题字母写错了,然后提示我的,如下图所示:

开发这个代码高亮插件的作者所写文档中写道,支持的主题如下,与上图比较来说,少了几个:

  • default
  • coy
  • dark
  • funky
  • okaidia
  • solarizedlight
  • tomorrow
  • twilight
  • atom-dark
  • base16-ateliersulphurpool.light
  • cb
  • duotone-dark
  • duotone-earth
  • duotone-forest
  • duotone-light
  • duotone-sea
  • duotone-space
  • ghcolors
  • hopscotch
  • pojoaque
  • vs
  • xonokai

废话不多说,下面直接开始展示,我所展示的是插件所支持的代码主题,也就是图中所显示的,以下是我自己亲自实践所得,如果主题有所不符,还请批评指正!

coy

dark

funky

okaidia

solarizedlight

tomorrow

twilight

a11y-dark

atom-dark

base16-ateliersulphurpool.light

cb

darcula

dracula

duotone-dark

duotone-earth

duotone-forest

duotone-light

duotone-sea

duotone-space

ghcolors

hopscotch

material-dark

material-light

material-oceanic

pojoaque

shades-of-purple

这个是我目前使用的代码高亮主题

synthwave84

vs

xonokai

default

当然你也可以再原有的代码高亮主题的基础上就行DIY,源代码位置:你的博客根目录\node_modules\prism-themes\themes你的博客根目录\node_modules\prismjs\themes,如下图所示:

还可以对代码主题进行其他的修改,比如行号,关键词的高亮,语言的显示等等,都可以在这里面修改,自己研究研究就可以进行修改了,小编就不再这里过多的说明了,展示一些目录截图吧😄😄😄

文章作者: Yafine
文章链接: https://yafine-blog.cn/posts/f295.html
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 过客~励む
打赏
  • 微信
    微信
  • 支付寶
    支付寶

评论