How do I format text in HTML to make it look like code?

Hi there,

I’ve been working on the HTML and CSS cheatsheet, which is open-ended as some of you may know. As you can see from the screenshot, I’m working on building a reference for CSS selectors and specificity. In it, I’ve included a table with column headings of the specificity, syntax, and description of each selector. What I’m stuck on is how I can use the skills I’ve acquired to format the syntax of the CSS example text in HTML. For example, to format the syntax of the id selector, I would want it to look something like this:

#ID {
  color: red;
}

I basically want to be able to format the text to include highlighting and features which are built in an IDE or text editor when writing code. I’ve included a screenshot of how CSS code is formatted in VSCode, which is the type of formatting I would like to apply to my HTML text.
image|690x67
image

Any suggestions?

Hello and welcome to the forums @obscenecor

I have been working on cheetsheets too and found that you can use the span element too chooses a specific group of words.

Just rap the words in <span> example </span>

Then style them with CSS by reffering to the span elements id.


span {
color: red;
}


I hope that answers your question. :grinning:
you can find more instructions at this link…

developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals

2 Likes

Thank you for the warm welcome! Also, I want to Thank you for making me understand how I can apply styling to an individual text. Also, is there any way I could mimic the indentation that a text editor applies to my code, just to make it more readable? For example, you can see that the screenshot above has the CSS declarations (property-value pairs) indented a certain way to make the text more appealing. I can’t seem to do this in HTML. Suggestions?

1 Like

You can use the CSS text-indent property…

p {
text-indent: 20px;
}

I have my example measured in pixels though you can use other measurments.

1 Like

Thank you so much! I didn’t even know that existed! All the best!

1 Like

@obscenecor, I’m not sure exactly how you are planning to use this, but if you want to distinguish lines of code or code blocks from normal text on your page, you can achieve this using the <code> and <pre> tags and then style those in CSS with the colors you want.

So if you want to just show one line of code or less, wrap it in <code> tags (<code>your code here</code>) and it looks like this:

new_lst = [x for x in lst].

If you want to put in a block of code that contains your indentations, etc, you wrap that like this:

<pre><code>your code here</code></pre>

and it will look something like this:

new_lst = []
for x in lst:
    new_lst.append(x)

Then you can move over to your CSS file and change the colors. For example, on my website and blog I used this:

code{
    color: whitesmoke;
    background-color: black;  
}

pre{
    color: whitesmoke;
    background-color: black;
    scrollbar-color: dark;
    width: 100%;
    max-height: 800px;
    display: inline-block;
    overflow: auto;  
}

This won’t style the color for the individual words in your code block (you can do that with <span> tags and classes, etc.), but it should give you a good starting place.

Happy coding!

1 Like