2.1 The <pre> Tag
The <code> and <pre> tags are used in HTML for representing code snippets and preformatted text.
They help improve readability and preserve the formatting of the original text, which is especially handy for displaying
code examples and other technical materials.
The <pre> tag (short for "preformatted text") is used to display text in HTML exactly as it is written,
preserving all spaces, line breaks, and tabs. This is particularly useful for presenting large
chunks of code or other preformatted text.
Syntax:
<pre>
text
</pre>
Example:
<pre>
function sayHello() {
console.log("Hello, world!");
}
</pre>
In this example, the text inside the <pre> tag will appear with all spaces and line breaks
intact, just as it is written in the source code.
Features of the <pre> Tag:
- The
<pre>tag preserves all spaces and line breaks in the text - It displays the text in a monospace font
- Often used together with the
<code>tag to highlight code
2.2 The <code> Tag
The <code> tag is used to denote code snippets or other machine-readable data within text. It's
typically used to highlight lines of code, variables, functions, and other programming elements.
<code>code</code>
Example:
<p>To log a message to the console, use the <code>console.log()</code> function.</p>
In this example, the text "console.log()" will be highlighted as code.
Features of the <code> Tag:
- The
<code>tag displays text in a monospace font (usually Courier or Consolas) - It does not preserve formatting like line breaks or indentation
- The
<code>tag is often used within other tags such as<p>,<li>, or<pre>
2.3 Using <pre> and <code>
For highlighting and formatting large code blocks, the <pre> and <code> tags are often used together.
This helps preserve formatting and highlight the text as code.
Example:
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
As a result, the browser will display the text with preserved formatting and code highlighting.
2.4 Syntax Highlighting
For syntax highlighting, you can use third-party libraries like Prism.js or Highlight.js, which automatically detect and highlight code syntax on a webpage.
Example using Highlight.js:
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre><code>
function helloWorld() {
console.log('Hello, world!');
}
</code></pre>
<body>
</html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<pre>
<code>
function helloWorld() {
console.log('Hello, world!');
}
</code>
</pre>
<body>
</html>
As a result, the code block will be automatically highlighted according to JavaScript syntax.
The <code> and <pre> tags in HTML are powerful tools for displaying and formatting
code and other text with preserved original formatting. Enjoy using them.
GO TO FULL VERSION