0

So after years of doing work on back end technologies such as PHP and C#, I find myself in the position of working on the front end again. I'm trying to build up my knowledge of bootstrap, and am making my own local reference page. I'm trying to use the widgets produced to display the code so I can refer to them easily.

I've been doing things like the following in regards to show me elements of JQuery that bootstrap references, and it works perfectly.

<p>Echo the JQuery 
    <code>
        $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); 
    </code> at the bottom (or somewhere) to enable this.
</p>

However, when I try to apply the following concepts to HTML itself, it tries to apply markup.

<p>
    This uses 
    <code><div class=container></div></code>
    in the outer div, and 
    <code><div class=page-header></div></code> 
    in the nested title.
</p>

This produces:

This uses in the outer div, and

in the nested title.

Am I doing something really obviously wrong here? Or do I need to escape it with some other element? Here's a JSFiddle: https://jsfiddle.net/o4vereqk/4/

Reisclef
  • 2,056
  • 1
  • 22
  • 25
  • The browser doesn't know that the tags inside the `` aren't to be rendered. What you need to do is write it as `<div></div>`. It may look messy, but you need to use `<` and `>` instead of `<` and `>`. Example: https://jsfiddle.net/o4vereqk/6/ – gen_Eric Aug 25 '15 at 20:25
  • This is not what the code tag is for. You can get some more insight here: http://stackoverflow.com/questions/2820453/display-html-code-in-html – Matt Aug 25 '15 at 20:28
  • 2
    you can use this tool to generate the encoded HTML: http://www.web2generators.com/html-based-tools/online-html-entities-encoder-and-decoder – Aziz Aug 25 '15 at 20:38

1 Answers1

3

You have to escape the angle brackets (< & >) so they become &amplt; (<) and &ampgt; (>).

This can be done in most preferable programming language and then maybe been made pretty with a prettify javascript you may find a code prettifyer somewhere on the internet.
This looks interesting (Code prettify), which supports multiple languages.

Most frameworks like bootstrap and others often use a doc generator which I do believe will build the <code> snippets for you based on examples you have provided to the doc generator. I assume boostrap uses one but I cannot be too sure.

Morten
  • 378
  • 2
  • 15
  • Thanks! I knew there must be some way to escape it, but couldn't seem to find any reliable information, and I hadn't considered < and > as the way of escaping. Looking good now! :) – Reisclef Aug 25 '15 at 21:52
  • Some people also say that you should escape & too. So keep that in mind if you are doing that yourself :) – Morten Aug 25 '15 at 21:54