Technical Documentation Page Certification project (code snippets)

HTML-CSS
1

Tell us what’s happening:
Hi guys, I am doing the (New) Responsive Web Design, and so far I’have been having a blast!

Right now I’m trying to add code snippets but the output is not showing the elements.

I’ve been googling around and found solutions that implement JavaScript, but I haven’t started the JavaScript course so I have 0 knowledge of JS.

Is there a way I can implement code snippets without JS and the editor taking the elements inside the <pre><code></code></pre> as actual html content?

Your code so far

<section class="main-section" id="So_what_is_HTML?" >
        <header><h2>So what is HTML?</h2></header>
        <article>
          <p>HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:</p>
          <div class="code-snippet"><pre><code>My cat is very grumpy</code></pre></div>
          <p>If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:</p>
          <div class="code-snippet"><pre><code><p>My cat is very grumpy</p></code></pre></div>
</section>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.127 Safari/537.36 OPR/86.0.4363.64

Challenge: Build a Technical Documentation Page

Link to the challenge:

2

Hi

You’ll need to replace any reserved HTML characters in your code snippets with the corresponding HTML entity.

For example, the left angle bracket (<) is replaced by &lt; like this:

<div class="code-snippet"><pre><code>&lt;p>My cat is very grumpy&lt;/p></code></pre></div>

(You don’t need to replace the > character in the tags with &gt;, but you can if you want to).

There’s a useful list of some of the most common reserved HTML characters and entities here.

1 Like
3

thank you very much! this was the answer, I found it before googling “escaping html” but only found people saying you need to somehow link a javascript first in order to do that, felt pretty bummed by that, but it works perfectly here.

quick question, is it like this on every HTML reader? or do some actually need a javascript in order to work like this?

4

As far as I know, it’s a general rule.

Whenever you want to display these reserved html characters as text on a web page, you have to use the appropriate html entities ( &lt; &amp; etc.) or the browser will interpret them as html.

If you have a lot of html that you want to display as code text, I did find this online formatter.
I haven’t tried it - so, at your own risk (!) - but it might make the process a little less tedious.

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.