當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發布時間：2023/12/31 编程问答 25 豆豆

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

代碼高亮（代碼著色）就是指讓代碼中不同語句根據類別顯示不同的顏色，從而增強可讀性，而不是干巴巴一片黑色。我們可以通過 Hightlight 或 Prism 使網頁支持代碼高亮，在這里筆者使用了 Prism

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

原代碼和經 Prism 代碼高亮的對比圖如下

🗃?附件

在 Prism 官網下載 prism.js

https://prismjs.com/download.html

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

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

在目錄底下找到 wp-content/themes/[WordPress使用的主題名稱]/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 網站上裝有 WP Githuber MD 后，代碼塊的代碼能被 Prism 正常高亮，但行內代碼不起效。

📋演示

Markdown 標注行內代碼

`[行內代碼]`

Markdown 標注代碼塊代碼

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

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

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

效果如下

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。