Deno Fresh集成highlight.js样式不生效及导入CSS报错问题

问题根源 #

1. CSS导入报错：Fresh框架对CSS导入有特定要求，直接在路由文件中导入.css文件会触发语法错误，因为Deno/Fresh默认不支持这种导入方式。
2. 无样式显示：CSS未成功加载，导致生成的hljs类标签没有对应的样式生效。

解决步骤 #

1. 修复CSS导入错误（二选一即可） #

方案一：通过CDN引入highlight.js样式

修改routes/_app.tsx文件，在页面头部添加CDN样式链接：

import { Head } from "$fresh/runtime.ts";

export default function App({ Component }: { Component: React.ComponentType }) {
  return (
    <>
      <Head>
        {/* 引入highlight.js默认样式，版本可根据实际使用调整 */}
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css" />
      </Head>
      <Component />
    </>
  );
}

方案二：本地导入样式文件

• 从deno_modules/highlight.js/styles目录中复制default.css到项目的static文件夹
• 在routes/_app.tsx中通过相对路径引入：

import { Head } from "$fresh/runtime.ts";

export default function App({ Component }: { Component: React.ComponentType }) {
  return (
    <>
      <Head>
        <link rel="stylesheet" href="/static/default.css" />
      </Head>
      <Component />
    </>
  );
}

2. 确保C++语言正确注册与高亮生成 #

修改routes/index.ts，确保正确导入并注册C++语言模块，同时正确生成高亮代码：

import { PageProps } from "$fresh/server.ts";
import hljs from "highlight.js";
import cpp from "highlight.js/lib/languages/cpp";

// 注册C++语法模块
hljs.registerLanguage("cpp", cpp);

export default function Home(_props: PageProps) {
  const cppSampleCode = `#include <iostream>
int main() {
  std::cout << "Hello, C++!" << std::endl;
  return 0;
}`;

// 生成带高亮的HTML代码
const highlightedCode = hljs.highlight(cppSampleCode, { language: "cpp" }).value;

  return (
    <div className="p-6 max-w-2xl mx-auto">
      <h1 className="text-2xl font-bold mb-4">C++代码语法高亮示例</h1>
      {/* 注意外层pre需要加上hljs类，确保样式生效 */}
      <pre className="hljs p-4 rounded bg-gray-100 overflow-x-auto">
        <code dangerouslySetInnerHTML={{ __html: highlightedCode }} />
      </pre>
    </div>
  );
}

3. 验证项目运行 #

在PowerShell中执行启动命令：

deno task start

访问本地服务地址，即可看到带正确样式的C++语法高亮代码。

内容的提问来源于stack exchange，提问作者crillion