置顶公告:【置顶】关于临时开启评论区所有功能的公告(2022.10.22) | 【置顶】关于本站Widget恢复使用的公告
  • 你好~!欢迎来到萌娘百科镜像站!如需查看或编辑,请联系本站管理员注册账号。
  • 本镜像站和其他萌娘百科的镜像站无关,请注意分别。

帮助:代码高亮工具

来自萌娘百科
跳到导航 跳到搜索
Circle-icons-tools-light blue.svg
这个页面“Help:代码高亮工具”是萌娘百科的小工具说明文档

Code prettify是一个基于JavaScript开发的页面显示工具,可以对页面上的代码进行高亮。您可以在参数设置中勾选“代码高亮工具DM 阅读时高亮显示页面上的代码块。”启用此工具。

此工具基于Google Code Prettify写成,源地址:https://github.com/googlearchive/code-prettify

可用语言列表

自动高亮语言

本工具支持下表左列语言的高亮和自动检测,探测到对应语言的代码块时会自动进行高亮。

语言支持情况
受支持的语言 对应可用名称
TypeScript ts
typescript
JavaScript js
javascript
JSON json
CSS css
HTML htm
html
Lua scribunto
lua
PHP php
Regex regex
LaTeX latex
tex

手动高亮语言

本工具支持code-prettify默认支持的其他语言高亮,但不会自动检测语言,需要手动指定语言:

  • C系列语言:c, cc, cpp, cxx, cyc, cs
  • Java
  • Python
  • Bash
  • SQL
  • Perl
  • XML
  • Ruby
  • Makefile
  • Rust
  • 正则表达式

不在上表的语言也可能能被高亮,但效果不作保证。

使用方法

读者侧

您只需要到参数设置中勾选“代码高亮工具DM 阅读时高亮显示页面上的代码块。”启用本工具即可。

编辑侧

您可以通过以下几种方式编写可被本工具自动检测语言并高亮的代码块:

  1. JS、CSS页面等页面内容模型为#自动高亮语言表中左侧语言之一的页面;
  2. <pre><code>标签里填写lang属性,值需为#自动高亮语言表中右侧名称之一,不分大小写:
    • {{pre}}支持<pre>的语言指定,具体参见模板文档。

您可以通过以下方式编写可被本工具高亮的代码块,但须手动指定语言:

  1. <pre><code>标签里填写class属性,值需为prettyprint lang-【语言名】,语言名要么为MediaWiki:Gadget-code-prettify-core.js#L681-L739所定义的语言名,要么为该语言的通用名或文件扩展名,不分大小写。

通过上述第2、3种方法进行高亮的<pre>元素可在标签里填写data-start属性,值需为正整数,指定代码第一行的行号,若不指定则默认为1。