W3.CSS Code（代码）
显示的例子
w3-panel 类用于在灰色容器中显示示例:
实例
<div class="w3-panel w3-card w3-light-grey">
<h3>示例</h3>
<div class="w3-container w3-white">
<p>
<ul class="w3-ul w3-card-4" style="width:50%">
<li>小明</li>
<li>小刚</li>
<li>小美</li>
</ul>
</p>
</div>
<p>显示为卡片的列表.</p>
</div>
尝试一下 »
显示代码
w3-code 类用于显示用代码在可读取的单间隔的字体。
实例
<div class="w3-panel w3-card w3-light-grey">
<h3>Example</h3>
<div class="w3-code notranslate">
水果[0] = "香蕉";<br>
水果[1] = "苹果";<br>
水果[2] = "芒果";<br>
水果[3] = "橘子";<br>
</div>
</div>
尝试一下 »
突出显示内联代码
W3-codespan 类是用来突出内嵌代码：
该 html 元素定义的 HTML 页面。
实例
<div class="w3-container">
<h2>突出内联代码</h2>
<p>w3-codespan类用于突出显示内联代码:</p>
<p>这个 <code class="w3-codespan">html</code>元素定义一个HTML页面.</p>
</div>
尝试一下 »
着色代码
w3cschool 提供了一个 JavaScript 库来着色代码。
实例
<div class="w3-panel w3-card w3-light-grey">
<h4>JavaScript 示例</h4>
<div class="w3-code jsHigh notranslate">
水果[ 0 ] = “香蕉”；<br>
水果[ 1 ] = “苹果”；<br>
水果[ 2 ] = “芒果” ;<br>
水果[ 3 ] = “李子”；<br>
</div>
</div>
尝试一下 »
您可以从此处下载该库： https://7npmedia.w3cschool.cn/w3codecolor.js
如果使用 w3codecolor.js 库，则还可以使用下面描述的代码类：
突出显示 JavaScript 代码
该 jsHigh 类是用来突出的 JavaScript 代码：
水果[ 1 ] = “苹果”；
水果[ 2 ] = “芒果” ;
水果[ 3 ] = “李子”；
突出显示HTML代码
该 htmlHigh 类用于高亮的 HTML 代码：
实例
<div class="w3-panel w3-card w3-light-grey">
<h4>HTML 示例</h4>
<div class="w3-code htmlHigh notranslate">
<!DOCTYPE html><br><html><br>
<title>HTML Tutorial</title><br>
<body><br><br>
<h1>这是一个标题</h1><br>
<p>这是一个段落。</p><br><br>
</body><br>
</html>
</div>
</div>
尝试一下 »
突出显示 CSS 代码
该 cssHigh 类是用来突出 CSS 代码：
实例
<div class="w3-panel w3-card w3-light-grey">
<h4>CSS 示例</h4>
<div class="w3-code cssHigh notranslate">
body {<br>
background-color: #d0e4fe;<br>
}<br><br>
h1 {<br>
color: orange;<br>
text-align: center;<br>
}<br><br>
p {<br>
font-family: "Times New Roman";<br>
font-size: 20px;<br>
}
</div>
</div>
尝试一下 »