使用 <pre> 和 <code> 标签显示一个 javascript 脚本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17882167/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:58:51  来源:igfitidea点击:

Using <pre> and <code> tags to display a javascript script

javascriptjqueryhtmlpre

提问by jezzipin

I'm experimenting with the < pre> and < code> tags in html 5 as I would like to include some code snippets on my website. I'm using the page below as a test page but it is not displaying anything. Any reason why?

我正在试验 html 5 中的 < pre> 和 < code> 标签,因为我想在我的网站上包含一些代码片段。我使用下面的页面作为测试页面,但它没有显示任何内容。有什么理由吗?

    <body>
    <div style="color:#000000">
      <pre>
        <code>
          <script type="text/javascript">
            $('#inputField').hide();
          </script>
        </code>
      </pre>
    </div>
    </body>

It was my understanding that using these new tags would negate any code that they contain within however this does not appear to be the case.

我的理解是,使用这些新标签会否定它们包含的任何代码,但情况似乎并非如此。

Cheers,

干杯,

J

J

回答by Gerald Schneider

These tags are only for "decorational" purposes. Code within will still be executed. If you want it displayed you have to convert at least the <script>tag to html:

这些标签仅用于“装饰”目的。里面的代码仍然会被执行。如果你想显示它,你必须至少将<script>标签转换为 html:

&lt;script type="text/javascript"&gt;

Then the JavaScript code inbetween will be shown.

然后将显示中间的 JavaScript 代码。

You don't need both though, I would use <pre>(which is per default a block element), <code>is intended for inline use.

不过,您不需要两者都需要,我会使用<pre>(默认情况下是块元素),<code>用于内联使用。

回答by maximkou

Remove scripttag:

移除script标签:

<body>
    <div style="color:#000000">
      <pre>
        <code>
            $('#inputField').hide();
        </code>
      </pre>
    </div>
</body>

回答by Quentin

It was my understanding that using these new tags would negate any code that they contain

我的理解是使用这些新标签会否定它们包含的任何代码

They don't. They tell user agents to presentthe data as code. So it will have font changes, white space will be significant, it should be skipped over by translation software and so on.

他们没有。他们告诉用户代理将数据呈现为代码。所以它会有字体变化,空白会很明显,应该被翻译软件跳过等等。

Markup still takes effect (so you can add elements to style, or link the code to other places, and so on) so you still need to replace HTML special characters (<, &, etc) with their respective entities (&lt;, &amp;, etc).

标记仍然生效(所以你可以添加元素的风格,或代码链接到其他地方,等等),所以你仍然需要替换HTML特殊字符(<&各自的实体(等)&lt;&amp;等等)。

回答by fditz

This would work if you take the scripttags out.

如果您取出脚本标签,这将起作用。

These code tags only change the font of the text inside to a monospace font, however it does not override the interpretation of other tags (or even php tags).

这些代码标签只将里面的文本字体更改为等宽字体,但它不会覆盖其他标签(甚至 php 标签)的解释。

A better way is to use CSS to get color highlighting, or javascript libraries.

更好的方法是使用 CSS 来获得颜色突出显示,或使用 javascript 库。