我如何为代码着色

Question

我有一个即将在Github上发布的新库，但是我需要在我的图书馆网站上创建文档教程，问题是如何将代码放在代码空间中？

查看下面的图片

以及如何为代码着色，没有很多代码，有没有简便的方法

Answer 1

您可以使用开源语法突出显示库，例如highlightJS

Answer 2

PrismJS怎么样，允许您通过传递特定的类名称进行选择，例如css，javascript，html等...

https://prismjs.com/

<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/themes/prism.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.16.0/prism.min.js"></script>

For Example (CSS):

<pre><code class="language-css">p { color: red }</code></pre>

Answer 3

您可能可以使用highlight.js。这样可以使用js和css突出显示语法。

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>


<pre><code class="css">
body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}
</code></pre>