React如何在页面展示代码？

Question

就像ant design官网一样

除了 用编辑器上传 保存在后台，然后在 前端拿数据渲染
有没有 直接写成静态页面的

Answer 1

1.不知道你说的静态页面是啥意思，这个一般是用code标签或者pre标签把代码包含起来,高亮颜色自定义
2.另外也可以直接用https://github.com/codemirror... 这个库来显示

Answer 2

展示的代码和应用的源代码没有关系，前者本质是字符串，怎么写都行，而后者是要能通过编译并运行的。

如果你说的是展示一段和源码本身没关系的代码，只要获取这段代码（字符串）就可以了，然后根据指定的样式渲染在页面上。在React里展示需要一些库来实现更好的展示效果，比如高亮等。

如果是展示应用本身的源码，浏览器中的JS无法操作文件，一因此需要后端读取代码文件，转换成字符串发送给前端。接下来的处理和上面一样。

Answer 3

可以看一下React打包方面的资料，可以把你前端的页面打包出来。