To format source code in HTML, you can use the `
` element. This element is used to define inline code snippets, and can be styled using CSS.
Here's an example:
```html
This is some text with inline code.
function greeting(name) {
console.log(`Hello, ${name}!`);
}
greeting('World');
```
In this example, the `` element is used to format the "inline code" text within the paragraph. The `` element is used to format a block of code, and the `` element is nested within it to define the code itself.
You can use CSS to style the `` and `` elements to match your desired look and feel. For example:
```css
code {
background-color: #f0f0f0;
border: 1px solid #ddd;
padding: 0.2em 0.4em;
font-family: 'Courier New', monospace;
}
pre {
background-color: #f8f8f8;
border: 1px solid #ddd;
padding: 1em;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
```
This CSS will add a light gray background to the `` element and a slightly darker gray background to the `` element. It also adds a border and padding to both elements, and sets the font family to a monospace font like Courier New. The `overflow-x` property ensures that the code block can be horizontally scrolled if necessary.
