在WordPress中呈现嵌入式Markdown代码片段的服务器端呈现

因为我是一个脾气暴躁的老头,我不在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=,它可以是truefalse。我总是希望这是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 );
}