Displaying Computer Code
Computer code in HTML, particularly when explaining or showcasing examples, it is important to properly format and display the code so that it is readable, recognizable, and highlighted for its specific use. HTML offers several tags and methods to display computer code effectively. This chapter will take you through everything you need to know about displaying code in HTML, from basic concepts to advanced techniques.
Displaying Code in HTML
Displaying code on a webpage is essential for developers, educators, and technical writers. The code must be displayed in a way that accurately represents its syntax and structure without the browser trying to interpret it as part of the HTML page itself. HTML provides several semantic elements designed specifically for this purpose. In this chapter, we will explore these options in detail.
Using the code Tag
The <code> tag in HTML is used to represent inline code snippets. It doesn’t preserve the formatting (like indentation or line breaks), but it differentiates the code from other text by applying a monospace font.
Example
<p>To print a message in Python, use the following code: <code>print("Hello, World!")</code>.</p>
Output
To print a message in Python, use the following code: print("Hello, World!").
Explanation
The <code> tag wraps around the inline code print("Hello, World!"). It doesn’t apply any special formatting but changes the font to a monospace type, which is standard for displaying code.
Using the pre Tag for Preformatted Text
While the <code> tag is used for inline code, the <pre> tag is essential for displaying block-level code with proper indentation and line breaks. The <pre> tag preserves whitespace, including spaces and newlines.
Example
<pre>
def say_hello():
print("Hello, World!")
</pre>
Output
def say_hello():
print("Hello, World!")
Explanation
The <pre> tag preserves the exact formatting of the text inside it, making it ideal for block-level code. It keeps indentation, spaces, and newlines, which is critical when showing code with proper structure.
Combining pre and code Tags
For best results when displaying block-level code, you can combine the <pre> and <code> tags. The <pre> tag preserves the code’s formatting, while the <code> tag indicates that the content inside is code, offering semantic meaning.
Example
<pre><code>
function greet() {
console.log("Hello, World!");
}
</code></pre>
Output
function greet() {
console.log("Hello, World!");
}
Explanation
Here, the <pre> tag ensures that the code retains its structure and indentation, while the <code> tag semantically marks the text as code. This combination is widely used to display programming languages on websites.
Using the kbd Tag for Keyboard Inputs
The <kbd> tag is used to represent keyboard input. This is useful when documenting commands or showing specific keys a user should press.
Example
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the document.</p>
Output
Press Ctrl + S to save the document.
Explanation
The <kbd> tag wraps around individual keys or combinations, indicating to the user that these are keyboard inputs. The text is displayed in a monospace font to make it visually distinct.
Displaying Code with the samp Tag
The <samp> tag is used to represent sample output from a computer program. This is useful when showing the result of executing code.
Example
<p>Expected output: <samp>Hello, World!</samp></p>
Output
Expected output: Hello, World!
Explanation
The <samp> tag is used here to show the output of a program, which is the text Hello, World!. Like other code-related tags, it applies a monospace font.
Highlighting Code with CSS
You can apply custom styles to your code using CSS. This allows you to create a visually appealing code block, highlighting important parts of the syntax.
Example
<pre><code class="highlight">
function greet() {
console.log("Hello, World!");
}
</code></pre><style>.highlight {
background-color: #f4f4f4;
color: #d63384;
padding: 10px;
border-radius: 5px;
}</style>
Output
function greet() {
console.log("Hello, World!");
}
Explanation
The highlight class adds a background color and padding to make the code block stand out. This is a simple way to make your code more readable and attractive.
Escaping HTML Characters in Code
When displaying HTML code itself, you need to escape certain characters like <, >, and &, so the browser doesn’t interpret them as actual HTML. This is done using HTML entities:
<for<>for>&for&
Example
<pre><code>
<h1>Hello, World!</h1>
</code></pre>
Output
<h1>Hello, World!</h1>
Explanation
By using < and >, we ensure that the <h1> tag is displayed as text, rather than being rendered as an actual HTML heading.
Using Syntax Highlighting Libraries
For more advanced code highlighting, you can use external libraries like Prism.js or Highlight.js. These libraries automatically add colors and formatting to various programming languages based on their syntax.
Example Using Prism.js
<pre><code class="language-javascript">
function greet() {
console.log("Hello, World!");
}
</code></pre><link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism.min.css" rel="stylesheet" /> <script type="litespeed/javascript" data-src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
Output
The code block would be highlighted with different colors for the keywords (function, console.log) and strings ("Hello, World!").
Explanation
Libraries like Prism.js are excellent for automatically applying syntax highlighting to code. They support multiple programming languages and offer customizable themes.
Displaying computer code on web pages is an important task for educators, technical writers, and developers. HTML provides several semantic elements such as code, pre, kbd, and samp to help properly format and present code. Additionally, you can use CSS to style the code or take it a step further with external libraries like Prism.js for advanced syntax highlighting. Happy coding !❤️