如何将编程代码添加到HTML页面？

Question

我想在我的html页面添加一个代码区域。该区域应该像工作室一样。例如， JAVA 代码应该看起来像是在eclipse中的样子。

是否有模板或类似的东西？ 顺便说一句，它不像工作室那样完全像，只是一个简单的代码区域。

Answer 1

如果你想用纯HTML做，你可以使用标签<pre>和<code>，但你应该添加一些css来设置你想要的外观。

<pre>
  <code>
    public void main(){
     ...
    }
  </code>
</pre>

我建议您使用名为代码镜像（http://codemirror.net/）的javascript文本编辑器。它是一个很棒的工具，易于使用，并且支持多种语言。

Answer 2

您可以尝试 GeSHi - 通用语法荧光笔。 如果您使用的是WordPress，WP-Syntax插件很酷。

Answer 3

我还建议 highlightjs 。 https://highlightjs.org/usage/

如果你想像eclipse一样设计它，你也可以应用一些预先构建的主题。 https://highlightjs.org/static/test.html