Fresh项目中引入Highlight.js样式问题的解决方案

2025-05-17 06:09:06作者：薛曦旖Francesca

在使用Deno的Fresh框架开发Web应用时，很多开发者会遇到代码高亮的需求，通常会选择使用Highlight.js库来实现。然而，在Fresh项目中直接导入Highlight.js的CSS样式文件时，会遇到语法解析错误的问题。

问题背景

Fresh框架的一个特点是它不会对服务器端代码进行转译处理。这意味着在Fresh项目中，无法像在传统的Webpack或Vite构建的项目中那样直接通过JavaScript导入CSS文件。当开发者尝试使用类似import 'highlight.js/styles/default.css'的语法时，Fresh会抛出语法错误，因为它无法解析CSS文件的内容。

解决方案

在Fresh项目中，正确的做法是使用标准的HTML <link>标签来引入CSS样式文件。具体有以下几种实现方式：

将CSS文件复制到静态资源目录

最简单的方法是将所需的CSS文件（如default.css）从node_modules目录复制到项目的static目录下，然后在页面组件中使用<link>标签引用：
```
<link rel="stylesheet" href="/default.css" />
```
直接引用node_modules中的文件

虽然不推荐，但也可以通过相对路径直接引用node_modules中的CSS文件：
```
<link rel="stylesheet" href="../node_modules/highlight.js/styles/default.css" />
```

最佳实践

对于生产环境，建议采用第一种方法，即将CSS文件复制到static目录。这样做有以下优点：

路径更简洁稳定
避免因node_modules结构变化导致路径失效
便于版本控制和部署
可以方便地对CSS文件进行自定义修改

完整示例

以下是一个在Fresh项目中使用Highlight.js的完整示例：

import { Head } from "$fresh/runtime.ts";
import hljs from 'highlight.js/lib/core';
import cpp from 'highlight.js/lib/languages/cpp';

const createMarkup = (htmlString: string) => {
  return { __html: htmlString };
};

export default function Home() {
  const codeTxt = '#include <iostream>\nint main() {}';
  hljs.registerLanguage('cpp', cpp);  
  const highlightedCode = hljs.highlight(
    codeTxt,
    { language: 'cpp' }
  ).value;
  
  return (
    <>
      <Head>
        <link rel="stylesheet" href="/default.css" />
      </Head>
      <div>
        <pre>
          <code dangerouslySetInnerHTML={createMarkup(highlightedCode)} />
        </pre>
      </div>
    </>
  );
}