gpt4 book ai didi

javascript - 如何在 HTML 中显示类似开发网站的代码?

转载 作者:太空宇宙 更新时间:2023-11-03 20:05:38 24 4
gpt4 key购买 nike

我想了解如何以类似于 StackOverflow 或其他开发者网站的方式显示代码。当我说显示代码时,我的意思是这样的。

    Some sample Code

我在很多开发者网站上看到它,想知道如何做到这一点。

最佳答案

建议:阅读一些教程并学习 HTML、CSS 和 JavaScript。

但是here's一个完整的例子:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">

</head>
<body>

<pre>
<code class="hljs java">
public class Main {
public static void main(String[] args) {

}
}
</code>
</pre>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

这是它的工作原理。你在 <code> 中编写计算机代码元素。你包裹<code>带有 <pre> 的元素保留空白、换行等的元素。

然后您应该对代码进行语法高亮显示(也称为着色)。为此,您最好使用第三方库。有许多库可以做到这一点:

其中一些库还允许您为代码块选择配色方案Here's具有不同配色方案的相同代码:

为应用新配色方案而更改的唯一行是:

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">

关于javascript - 如何在 HTML 中显示类似开发网站的代码?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50528253/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com