Problem with <code> tag

HTML-CSS
#1

Hi! I am working on the Technical Documentation project. My documentation is about
DITA XML/ Markdown syntax. I tried putting some DITA snippets inside the html
<code> tag and VS code parses it as regular code. So I tried putting a <pre> tag around the DITA and that did not solve the problem. Here are the snippets.

  <code>
                <!--start code 
                    <topic id="topic_title">
                    <title>Topic title</title>
                    <topic id="nested_topic_title">
                      <title>Nested topic title</title>
                    </topic>
                  </topic> -->
            </code>
#2

I have figured out with using special characters how to get the code snippets to display, however I am not getting the whitespace I need to indent some of the code snippet lines where they are nested. to render in the output.

<pre><code>&lt;topic id="topic_title"&gt;
                <!-- needs 1 tab whitespace -->&lt;title&gt;Topic title&lt;/title&gt;
               <!-- needs 1 tab whitespace --> &lt;topic id="nested_topic_title"&gt;
                  <!-- needs 2 tabs whitespace -->&lt;title&gt;Nested topic title&lt;/title&gt;
                &lt;/topic&gt;
              &lt;/topic&gt;</code>
            </pre>
#3

If you want to show us your code here then you need to wrap it with three backticks (three backticks on a line by itself, then your code below, then three more backticks after your code on a line by itself).

#4

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#5

To display and not get the code snippet interpreted you’ll need to change the angle brackets into their respective HTML entities.

And on a side note, you don’t nest pre within code, it’s the other way around.

#6

Ok thanks! Sorry about the confusion with formatting of my code snippet folks.