因为我是一个脾气暴躁的老头,我不在WordPress上使用Gutenberg或区块主题。相反,我用Markdown写所有东西。
当我在Markdown中写代码段时,它们看起来像这样:
$a = 1;
echo $a;
if ($a < 5) {
// Do Something
return thing( $a, true );
}
但我想要使用代码高亮来渲染。我之前使用的是Prismatic Plugin (opens new window)。它非常出色且可定制。但它使用JavaScript来进行代码高亮。我想尊重读者的时间和电池寿命,所以我试图减少对客户端渲染的依赖。
我切换到了一个WP-GeSHi-Highlight (opens new window)的修改版本。这将上述Markdown转换为:
$a = 1;
echo $a;
if ($a < 5) {
// Do Something
return thing( $a, true );
}
必要更改 #
当JetPack Markdown预处理器遇到代码块时,会将:
改为
<pre><code class="language-php">
这意味着WP-GeSHi-Highlight检测需要更改。
旧版本:
return preg_replace_callback(
"/\s*<pre(?:lang=[\"']([\w-]+)[\"']|line=[\"'](\d*)[\"']"
."|escaped=[\"'](true|false)?[\"']|cssfile=[\"']([\S]+)[\"']|\s)+>".
"(.*)<\/pre>\s*/siU",
"wp_geshi_store_and_substitute",
$s
);
新版本:
return preg_replace_callback(
"/\s*<code(?:class=[\"']language\-([\w-]+)[\"']|line=[\"'](\d*)[\"']"
."|escaped=[\"'](true|false)?[\"']|cssfile=[\"']([\S]+)[\"']|\s)+>".
"(.*)<\/code>\s*/siU",
"wp_geshi_store_and_substitute",
$s
);
其中一个匹配项查找escaped=
,它可以是true
或false
。我总是希望这是true,所以在代码的后面,我将一个变量从:
$escaped = trim($match[3]);
更改为:
样式更改 #
默认情况下,一切看起来都很好,但我发现有一些必要的更改。
首先,我的样式中的行高度有一些奇怪的问题,所以我在站点的CSS中添加了这个:
/* GeSHI Highlighter Fixes */
pre:has(> .wp-geshi-highlight-wrap5) {
line-height: 0;
padding: 0;
background: none;
filter: invert(1);
}
invert
使其进入了深色模式。
其次,为了对高亮器的默认样式进行任何更改,您需要将捆绑的wp-geshi-highlight.css
文件添加到您的样式目录中。如果存在该文件,插件将使用它 - 这样您可以将字体大小和填充量更改为与您的主题相同。
限制 #
这种方法有一些限制。
没有行号。插件查找类似line="13"
的内容,但在Markdown中无法添加。
GeSHi在某些语言上很长时间没有接收到样式更新。自2019年以来,它没有接收到任何重大更新 (opens new window)。这意味着可能存在漏洞和安全问题。
语言定义非常严格。您可以使用javascript
但不能使用json
。
插件没有任何选项 - 也没有简单的方法来覆盖其设置。因此,我已经对上面的所有内容进行了修补。如果插件更新,我将需要更改我的代码。
演示 #
一些演示 - 让您看看它是什么样子。
Python #
#!/usr/bin/env python
from datetime import datetime, timedelta
from mastodon import Mastodon
from bs4 import BeautifulSoup
import config
# Set up access
mastodon = Mastodon( api_base_url=config.instance, access_token=config.access_token )
# Get user's info
me = mastodon.me()
my_id = me["id"]
year_joined = me["created_at"].year
Bash #
if [ "$(basename $2)" = "Image.gz" ] || [ "$(basename $2)" = "vmlinuz.efi" ]
then
# Compressed install
echo "Installing compressed kernel"
base=vmlinuz
else
# Normal install
echo "Installing normal kernel"
base=vmlinux
fi
if [ -f $4/$base-$1 ]; then
mv $4/$base-$1 $4/$base-$1.old
fi
Rust #
// This is the main function.
fn main() {
// Print text to the console.
println!("Hello World!");
}
JavaScript #
if (hour < 18) {
greeting = "Good day";
alert( greeting );
}