懒得打字了,说一下修改的几个 地方吧。
s9e的bbcode的repository.xml:
<!-- [CODE] BBCode, uses highlight.js for highlighting: https://highlightjs.org/ -->
<bbcode name="CODE">
<usage>[CODE lang={IDENTIFIER?}]{TEXT}[/CODE]</usage>
<template><![CDATA[
<pre data-s9e-livepreview-hash="" data-s9e-livepreview-onupdate="if(window['hljsLoader'])window['hljsLoader']['highlightBlocks'](this)">
<code>
<xsl:if test="@lang">
<xsl:attribute name="class">language-<xsl:value-of select="@lang"/></xsl:attribute>
</xsl:if>
<xsl:apply-templates />
</code>
<script async="" crossorigin="anonymous">
<xsl:if test="'default' != ']]><var name='style' description='highlight.js style name (or "none")'>github</var><![CDATA['">
<xsl:attribute name="data-hljs-style">]]>
<var name='style'>github</var>
<![CDATA[</xsl:attribute>
</xsl:if>
<xsl:if test="'https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/' != ']]><var name='url' description='highlight.js CDN URL'>https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/</var><![CDATA['">
<xsl:attribute name="data-hljs-url">]]>
<var name='url'>https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/</var>
<![CDATA[</xsl:attribute>
</xsl:if>
<xsl:attribute name="data-s9e-livepreview-onrender">if(window['hljsLoader'])this.parentNode.removeChild(this)</xsl:attribute>
<xsl:attribute name="src">/assets/loader.min.js</xsl:attribute>
</script>
</pre>
]]></template>
</bbcode>
这里使用了本地的 loader.min.js,因为需要在里边修改逻辑。具体逻辑如下
function loadHljs() {
if (hljsLoaded) {
return;
}
hljsLoaded = true;
// 检查颜色方案
const colorSchemeMeta = document.querySelector('meta[name="color-scheme"]');
const colorScheme = colorSchemeMeta ? colorSchemeMeta.getAttribute('content') : '';
// 根据颜色方案加载不同的样式文件
let styleSuffix = '';
if (colorScheme === 'dark') {
styleSuffix = '-dark';
}
if (style !== 'none') {
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = url + 'styles/' + style + styleSuffix + '.min.css'; // 加载 dark 样式文件
document.head.appendChild(link);
}
createScript('highlight', () => {
if (options) {
window['hljs']['configure'](JSON.parse(options));
}
highlightAll();
});
}
其实就是深色模式时,使用深色css。
另外就是 nightmode 的插件要改一下,这样切换时才会改变code的样式
export function setStyle(type) {
const lightUrl = 'https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css';
const darkUrl = 'https://fastly.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github-dark.min.css';
const highlightJsLink = document.querySelector('link[href*="highlightjs"]');
const light = document.querySelector('link.nightmode-light[rel=stylesheet]');
const dark = document.querySelector('link.nightmode-dark[rel=stylesheet]');
const url = getUrls()[type];
if (light && dark) {
// 如果存在 light 和 dark 两种样式表,则替换为新的样式表
if (highlightJsLink){
highlightJsLink.href = darkUrl; // 切换到暗色模式的 highlight.js 样式表
}
const newLink = document.createElement('link');
newLink.rel = 'stylesheet';
newLink.className = 'nightmode';
newLink.href = url;
// 根据浏览器支持情况进行样式表加载处理
if ('onload' in newLink) {
newLink.onload = function () {
light.remove();
dark.remove();
};
} else {
light.remove();
dark.remove();
}
document.head.append(newLink);
} else {
// 如果只存在单一的样式表,则更新其 href 属性即可
const el = light || dark || document.querySelector('link.nightmode[rel=stylesheet]');
if (url !== el.href) {
el.href = url;
el.className = 'nightmode';
if (highlightJsLink) {
highlightJsLink.href = type === 'night' ? darkUrl : lightUrl; // 根据模式切换到对应的 highlight.js 样式表
}
}
}
const colorScheme = document.querySelector('meta[name="color-scheme"]');
if (colorScheme) {
colorScheme.content = type === 'night' ? 'dark' : 'light';
}
// 触发自定义事件
const event = new CustomEvent('fofnightmodechange', {detail: type});
document.dispatchEvent(event);
}
现在就完美的支持深色模式下的代码高亮了。