Displaying code blocks through text

Hey! So i’m doing the doc page project. I wanted to have this code in
my project —>

<!doctype html>
<html lang="en">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <title>Hello, world!</title>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

BUT when putting this in <code></code> the page treats
it like regular html instead of just text. what do i do??
aka it just renders it.

The code tag is semantic, you still need to style it with CSS.

You could use the pre tag.

That did not work either.
Here is my project running in code pen.

The odd thing is all code other than html works fine.

So what exactly is your question?

I want to display that code as just plain text. but instead it runs the code.
look at my project to see what I mean.

i want this

<h1>hello world</h1>

not this

Hello World

sorry if i was not clear

Escape things that are HTML entities, eg &lt; rather than <. The stuff in there is still HTML code, <, > must be escaped as HTML has no way of knowing that you want to literally display those characters.

1 Like

so I have to manually do that?! omg I may just make a doc page about something else XD.
Thanks for your help!

Just Google “HTML escape app” or whatever, there’ll be thousands of results, eg


As an example, when you type a reply here and you paste some code inside backticks, there’s a function that looks at anything inside the backticks and escapes the code, and that escaped version is what you see when you hit reply

thanks man! Will do.

1 Like