将HTML元素嵌套在<code>

时间:2015-08-25 20:09:29

标签: html

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/

1 个答案:

答案 0 :(得分:3)

您必须转义尖括号(&lt;&amp;&gt;),以便它们变为&amp; lt; (&lt;)和&amp; gt; (大于)。

这可以用最优选的编程语言来完成,然后可能用美化的javascript做得很漂亮,你可能会在互联网上的某个地方找到代码预处理器。
这看起来很有趣(Code prettify),它支持多种语言。

大多数框架(如bootstrap和其他框架)经常使用doc生成器,我相信它会根据您提供给doc生成器的示例为您构建<code>代码段。我认为boostrap使用了一个,但我不能太确定。