Display the label (code) in the code

Displaying code is very common in web development, whether for showcasing examples or documentation. HTML provides multiple ways to achieve this requirement, from simple inline code to complex syntax highlighting.

Inline Code Display

Use the <code> tag to mark inline code snippets, typically mixed with text. Browsers display it in a monospace font by default:

<p>In HTML, use the <code>&lt;div&gt;</code> tag to create a container.</p>

The display effect is: In HTML, use <div> to create a container.

Multi-line Code Blocks

For multi-line code, the <pre> tag preserves all whitespace and line breaks, often used in combination with <code>:

<pre><code>
function greet() {
  console.log("Hello World!");
}
</code></pre>

Syntax Highlighting Implementation

Pure HTML cannot achieve syntax highlighting; CSS or JavaScript libraries are required. Here’s an example using Prism.js:

<link href="prism.css" rel="stylesheet" />
<script src="prism.js"></script>

<pre><code class="language-javascript">
// Arrow function example
const sum = (a, b) => a + b;
console.log(sum(2, 3)); // Outputs 5
</code></pre>

Custom Code Styling

Customize code display effects with CSS:

code {
  background: #f4f4f4;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: 'Courier New', monospace;
}

pre {
  background: #282c34;
  color: #abb2bf;
  padding: 1em;
  overflow: auto;
  border-radius: 5px;
}

pre code {
  background: transparent;
  padding: 0;
}

Responsive Code Containers

Ensure code blocks are readable on different devices:

<div class="code-container">
  <pre><code>
@media (max-width: 768px) {
  pre {
    font-size: 14px;
    white-space: pre-wrap;
  }
}
  </code></pre>
</div>

Code Copy Functionality

Add a one-click copy button to enhance user experience:

<div class="code-wrapper">
  <button class="copy-btn">Copy</button>
  <pre><code id="copy-code">
const data = {
  id: 1,
  value: "Sample text"
};
  </code></pre>
</div>

<script>
document.querySelector('.copy-btn').addEventListener('click', () => {
  const code = document.getElementById('copy-code').textContent;
  navigator.clipboard.writeText(code);
});
</script>

Code Comment Display

Differentiate between code and comments with styling:

<pre><code class="language-css">
/* Main container styles */
.container {
  width: 100%;  /* Responsive width */
  margin: 0 auto;
}

.button {
  color: #fff;  /* White text */
  background: #0066cc;  /* Blue background */
}
</code></pre>

Line Number Display

Add line numbers using CSS counters:

<style>
.line-numbers {
  counter-reset: line;
}

.line-numbers code {
  display: block;
}

.line-numbers span {
  display: block;
  line-height: 1.5;
}

.line-numbers span:before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 2em;
  padding-right: 1em;
  margin-right: 1em;
  color: #999;
  text-align: right;
  border-right: 1px solid #ddd;
}
</style>

<div class="line-numbers">
<pre><code>
<span>function factorial(n) {</span>
<span>  if (n <= 1) return 1;</span>
<span>  return n * factorial(n - 1);</span>
<span>}</span>
</code></pre>
</div>

Code Folding Functionality

Implement collapsible code blocks:

<details>
  <summary>View Solution Code</summary>
  <pre><code>
  // Fibonacci sequence implementation
  function fibonacci(n) {
    if (n <= 1) return n;
    return fibonacci(n - 1) + fibonacci(n - 2);
  }
  </code></pre>
</details>

Terminal-Style Code

Simulate command-line terminal display:

<div class="terminal">
  <div class="terminal-header">
    <span class="dot red"></span>
    <span class="dot yellow"></span>
    <span class="dot green"></span>
    <span class="title">bash</span>
  </div>
  <pre class="terminal-body"><code>
$ npm install package-name
+ package-name@1.0.0
added 1 package in 0.5s
  </code></pre>
</div>

<style>
.terminal {
  background: #1e1e1e;
  border-radius: 5px;
  overflow: hidden;
}
.terminal-header {
  padding: 0.5em;
  background: #333;
  display: flex;
  align-items: center;
}
.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-right: 6px;
}
.red { background: #ff5f56; }
.yellow { background: #ffbd2e; }
.green { background: #27c93f; }
.title {
  color: #aaa;
  margin-left: 1em;
  font-size: 0.8em;
}
.terminal-body {
  color: #f0f0f0;
  margin: 0;
  padding: 1em;
}
</style>

Code Diff Comparison

Show differences between code before and after changes:

<pre><code>
<span style="color:green">+ // Added line of code</span>
<span style="color:red">- // Deleted line of code</span>
<span>  // Unchanged line of code</span>
<span style="color:blue">! // Modified line of code</span>
</code></pre>

Interactive Code Examples

Create editable and executable code blocks:

<div class="live-code">
  <div class="editor">
    <h3>HTML</h3>
    <textarea id="html-code" rows="5">
<div id="output">Click the button to change me</div>
<button onclick="changeText()">Click</button>
    </textarea>
    
    <h3>JavaScript</h3>
    <textarea id="js-code" rows="3">
function changeText() {
  document.getElementById('output').textContent = 'Text changed!';
}
    </textarea>
  </div>
  
  <button class="run-btn">Run Code</button>
  
  <div class="result">
    <h3>Result</h3>
    <iframe id="result-frame"></iframe>
  </div>
</div>

<script>
document.querySelector('.run-btn').addEventListener('click', () => {
  const html = document.getElementById('html-code').value;
  const js = document.getElementById('js-code').value;
  const iframe = document.getElementById('result-frame');
  const doc = iframe.contentDocument || iframe.contentWindow.document;
  
  doc.open();
  doc.write(`
    <!DOCTYPE html>
    <html>
    <head><title>Live Code</title></head>
    <body>${html}<script>${js}</script></body>
    </html>
  `);
  doc.close();
});
</script>