當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

在WordPress网站上支持代码高亮（代码着色）

發(fā)布時(shí)間：2023/12/31 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了在WordPress网站上支持代码高亮（代码着色）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

代碼高亮（代碼著色）就是指讓代碼中不同語(yǔ)句根據(jù)類(lèi)別顯示不同的顏色，從而增強(qiáng)可讀性，而不是干巴巴一片黑色。我們可以通過(guò) Hightlight 或 Prism 使網(wǎng)頁(yè)支持代碼高亮，在這里筆者使用了 Prism

Prism ，即 prism.js，是一個(gè)輕量級(jí)，可擴(kuò)展的語(yǔ)法著色工具，可以讓你的代碼塊中的代碼顏色更豐富更好看（也就是“代碼高亮”）。

原代碼和經(jīng) Prism 代碼高亮的對(duì)比圖如下

🗃?附件

在 Prism 官網(wǎng)下載 prism.js

https://prismjs.com/download.html

在 Prism 官網(wǎng)上自定義你的代碼著色樣式：著色主題、著色插編程語(yǔ)言范圍、插件（高亮行、顯示行號(hào)、高亮關(guān)鍵字、鏈接跳轉(zhuǎn)、顏色塊顯示、命令行風(fēng)格、復(fù)制按鈕）等，然后下載相應(yīng)的 css 文件和 js 文件，將其放置到你的服務(wù)器上

同樣在服務(wù)器上找到 WordPress 站點(diǎn)目錄，如筆者的是 /www/wwwroot/[站點(diǎn)文件名]

在目錄底下找到 wp-content/themes/[WordPress使用的主題名稱(chēng)]/header.php

在 <head> 和 </head> 之中添加以下代碼，將代碼中 href 和 src 屬性的 url 更換成你自己的

<link rel="stylesheet" href="http://www.aaa.com/wp-content/prism/prism.css" /> <script type="text/javascript" src="http://www.aaa.com/wp-content/prism/prism.js"></script>

完成即可支持 Prism

順帶一提，不知為何在筆者 WordPress 網(wǎng)站上裝有 WP Githuber MD 后，代碼塊的代碼能被 Prism 正常高亮，但行內(nèi)代碼不起效。

📋演示

Markdown 標(biāo)注行內(nèi)代碼

`[行內(nèi)代碼]`

Markdown 標(biāo)注代碼塊代碼

``` [代碼塊代碼] ```

筆者通過(guò)額外增添下方所示的 CSS 樣式解決了該問(wèn)題，可在 WordPress 自定義功能中找到“額外 CSS ”進(jìn)行增添。

/* 標(biāo)注（行內(nèi)代碼）高亮 */ p>code{background:rgb(245,242,240);border-radius:6px;font-family:Source Sans Pro;font-weight:bold;padding:0 6px;margin:0 4px; }

效果如下

總結(jié)

以上是生活随笔為你收集整理的在WordPress网站上支持代码高亮（代码着色）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。