Technical Documentation Page - <code> HTML

1

Dear guys,

I used as I had to, but I would like to display only HTML code as it is (without its effects), as in tutorials.

Hello World!

Lorem ipsum...

Sed ut perspiciatis...

What can I do?

Marta

2

If you want to display HTML code as it is, consider using <pre> and <code> tags.

3

Hi “shimphillip”,

Thank you for helping me, but it also did not work. :confused:
Any idea?

Marta

4

You need to escape the html and put it inside pre and code tags.

A function to do so in JavaScript is as follows — you can use the entity map as a reference if you want to do it manually.

const entityMap = {
  '&': '&amp;',
  '<': '&lt;',
  '>': '&gt;',
  '"': '&quot;',
  "'": '&#39;',
  '/': '&#47;'
};

const escapeHTML = html => html.replace(/[&<>"'\/]/g, char => entityMap[char]);

Example:

<pre>
  <code>&lt;h1&gt;Hello World&lt;&#47;h1&gt;</code>
</pre>

Should display like this:

<h1>Hello World</h1>
5

Hi “lionel-rowe”

Thank you for your help, I understand now.
I do NOT really WANT to do it manually, (:grin:) but I am not able to use well JavaScript yet.

Marta

6

For a rough-and-ready solution, you can try escaping everything inside code tags as soon as the page content is loaded, like this (JavaScript):

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('code').forEach(el => {
    el.textContent = el.innerHTML;
  });
});

If you do this, you’ll need to make sure not to manually escape any of the content yourself, otherwise it will be double escaped and will appear as literal HTML entities (&amp; and so on).

Often, this wouldn’t be a suitable solution, because allowing unescaped HTML on the page even while the page is loading is a security risk if the content came from user input. However, in your case, you know you can trust the content as you wrote it yourself. :wink: