Question

我正在使用nextjs，我想在屏幕上直观地呈现代码。这里有点像这样：

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

语法突出显示代码。

我有一个React组件，它接受一个字符串并像<HightLight>{'code goes here'}</HighLight>这样执行语法突出显示。但是，将代码块作为字符串编写是困难的，我想将代码示例写入js文件以进行语法突出显示，然后将js代码示例文件的内容作为原始字符串加载。所以看起来像：

var CodeString = require('/static/example.js')

...

<HightLight>{CodeString}</HighLight>

....

当前我遇到错误：Module not found: Can't resolve '/static/example.js'。

我正在使用使用Next.conf.js而不是webpack.config的NextJS。看起来像这样：

// next.conf.js
module.exports = {
  webpack: config => {
    config.node = {
      fs: 'empty'
    };

    return config;
  }
};

任何人都可以在这里帮助我吗？

nextjs导入原始文件内容

0 个答案: