Skip to content

Astrop-aper模板用expressive-code代替默认的代码高亮

Published: at 06:32

虽然这个模板作者写了高亮代码的相关样式设置,实际使用了一下,感觉不是很适合自己,所以用Astro自己匹配的代码高亮插件expressive-code代替原来的,自己测试了一下,感觉还不错,记录下来

Table of contents

显示目录

Expressive Code

添加expressive-code的方法可以去官方的文档里面,写的非常详细,我这里简单记录几个关键的点,

安装

Terminal window
npx astro add astro-expressive-code

这个代码的字体展示感觉不是很友好,后面有时间需要调整一下

修改 astro.config.ts

添加如下文件中的代码部分,其中catppuccin-mocha为高亮代码的主题

astro.config.ts
export default defineConfig({
site: SITE.website,
integrations: [tailwind({
applyBaseStyles: false
}), react(), sitemap(), expressiveCode(
{
// Pass the theme to the `themes` option
// (consider adding a dark and light theme for accessibility)
themes: ['catppuccin-mocha'],
}
)],

这个主题本身的高亮代码主题我设置的是相同的catppuccin-mocha,没有太多时间去查找这两个对模板的影响,暂时先这样

fix原模板中关于代码Copy按钮的问题

本来以为直接这样就可以用了,仔细查看发现那个copy的按钮会相互影响,我觉得还是expressive-code自带的舒服一点

注释掉相关文件中的代码

layouts/PostDetail.astro
/** Attaches copy buttons to code blocks in the document,
* allowing users to copy code easily. */
// function attachCopyButtons() {
// let copyButtonLabel = "Copy";
// let codeBlocks = Array.from(document.querySelectorAll("pre"));
// for (let codeBlock of codeBlocks) {
// let wrapper = document.createElement("div");
// wrapper.style.position = "relative";
// let copyButton = document.createElement("button");
// copyButton.className =
// "copy-code absolute right-3 -top-3 rounded bg-skin-card px-2 py-1 text-xs leading-4 text-skin-base font-medium";
// copyButton.innerHTML = copyButtonLabel;
// codeBlock.setAttribute("tabindex", "0");
// codeBlock.appendChild(copyButton);
// // wrap codebock with relative parent element
// codeBlock?.parentNode?.insertBefore(wrapper, codeBlock);
// wrapper.appendChild(codeBlock);
// copyButton.addEventListener("click", async () => {
// await copyCode(codeBlock, copyButton);
// });
// }
// async function copyCode(block, button) {
// let code = block.querySelector("code");
// let text = code?.innerText;
// await navigator.clipboard.writeText(text ?? "");
// // visual feedback that task is completed
// button.innerText = "Copied";
// setTimeout(() => {
// button.innerText = copyButtonLabel;
// }, 700);
// }
// }
// attachCopyButtons();

注释掉170-210行关于代码copy部分,这部分与expressive-code相关部分冲突,不知道这种办法能不能行得通,自己测试通过,等后续发现问题再优化

下面是展示代码

这部分展示源自官方的那个文档,只为测试效果,没有实际意义

效果一

// Line 1 - targeted by line number
// Line 2
// Line 3
// Line 4 - targeted by line number
// Line 5
// Line 6
// Line 7 - targeted by range "7-8"
// Line 8 - targeted by range "7-8"

效果二

line-markers.js
function demo() {
console.log('this line is marked as deleted')
// This line and the next one are marked as inserted
console.log('this is the second inserted line')
return 'this line uses the neutral default marker type'
}

效果三

labeled-line-markers.jsx
<button
role="button"
{...props}
value={value}
className={buttonClassName}
disabled={disabled}
active={active}
>
{children &&
!active &&
(typeof children === 'string' ? <span>{children}</span> : children)}
</button>