<code> not displaying in Technical Documentation Page correctly

Hi there,

I’m trying to use (<)code(>) in the Technical Documentation Project but I don’t see the code in between my (<)code(>) tags displaying. I want to use the page to capture the HTML from the previous lessons.

E.g. (I don’t actually use the brackets)

(<)code(>)
(<)meta name=“viewport” content=“width=device-width, initial-scale=1.0” (/>)
(<)/code(>)

I’ve also tried use the (<)pre(>) tags and that doesn’t seem to work either.

1 Like

I think we need to see your actual HTML to see what you are trying to do.

To display code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

HTML Entities
Html characters
how to use them

1 Like

So I’m unsure if I’m explaining this correctly, but I’m just trying to have the HTML appear as HTML (not having gone through the markup process). Notice in the left I have a block of HTML between code() tags.

Yes, you are explaining it correctly. Since the browser treats < and > as the beginning and ending of HTML tags then it will automatically display them as HTML instead of literally showing them as the code. If you want the actual HTML code to show then you have to use the equivalent HTML entity codes for < and >.

If you look at the last link @zaklina gave you above it demonstrates how to do this.

1 Like

First off - I wish I could change the title of my forum post because I think my problem is different than what I initially explained it to be.

Thank you @bbsmooth and @zaklina. I think I get the concept of entity codes and how to use them (thanks to @Zaklina’s helpful demonstration). This seems like a great way to prevent markup on single instances within < > , but it seems a little tedious if you’re looking to paste an entire block of code (e.g. needing to do entity codes on every single tag). Is there no other way to prevent markup on a multiple lines at once?

I’ve tried wrapping my code tags in pre tags but that still doesn’t seem to help. I could just multi-line comment them but I was hoping there might be another solution.

Ya, it is, but that’s the way it is done. Most editors will let you do a find and replace, so that can make it easier. The FCC editor actually has find/replace functionality. If you press F1 while in the editor it should pop up a menu. Search for replace. I just tested it and it seems to work.

Ya, although it seems like it might help, those tags don’t solve the problem.

1 Like

Ahh, I feel like such a noob, that makes sense, thank you so much!

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