Question

我正在用html / css / javascript为我的公司编写C ++样式指南。我对html非常恼火，因为它将<和>之间的任何内容视为html标记，因此也会处理它们。因此，我的代码（我在样式指南中放置）看起来并不像这样。这是一个例子：

<pre>
std::vector<std::string>  get_project_names();    

template<typename Printable>
void print(Printable const & item);    

template<typename FwdIterable, typename Predicate>
FwdIterable find_if(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>

我希望浏览器能够完全呈现它，但它不会呈现，例如Chrome不显示<std::string>部分，IE 8.0将<std::string>大写为<STD::STRING> （和所有这些模板代码）。

我不希望html引擎受到任何干扰。有没有简单的方式来实现我想要的？是否有礼貌的方式告诉浏览器修改我的代码？

请注意，将<替换为<而将>替换为>会有效，但每次编写模板代码时编写它都很麻烦。它还使我的代码难以在html的源代码中阅读。所以我正在寻找一个简单的解决方案。

Answer 1

“告诉浏览器不修改（解析）我的代码”的礼貌方式的概念正是XML的CDATA所做的。没什么，没什么。

HTML中不存在CDATA，因此除了打开（不存在的）<std:vector>元素的标记之外，HTML中无法将std:vector视为任何其他内容。

执行此操作的常规方法是进行服务器端转换。现在，如果您没有生成HTML服务器端，而是手动编写它，那么通过像这样的客户端转换，您可以简化生活：

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Page Title</title>
  <script src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body>
  <pre><script type="text/coffeescript" >document.write "

    std::vector<std::string>  get_project_names();  

  ".replace('<','&lt;')
  </script></pre>
</body>
</html>

在这里，我使用了CoffeeScript，因为它的多线字符串功能在ES6中用于常规JavaScript。这样可以轻松地在代码行之间插入代码。

现在我知道这个解决方案很缺乏！如果您插入的代码包含"，那么您运气不好。并且它没有逃脱＆符号。

底线是没有CDATA，因此不存在“简单”解决方案。需要转换，客户端或服务器端。

你试过降价吗？

Answer 2

我多年来一直在处理这个特殊问题，而且一直令人沮丧。我一直很欣赏Markdown的简洁和优雅，所以我做了一些研究，看看是否有任何方法可以使用Markdown来构建HTML文档。

事实上，代码示例有时涉及HTML，但HTML是我们用来编写样式指南和API文档的语言，所以我的想法是如果我们在Markdown中编写API文档和样式指南，我们＆＃ 39;消除HTML与其他语言语法之间的所有冲突。

我找到了Strapdown.js，这是一个允许您创建纯Markdown网页的库。然后，库将其编译为HTML并在页面客户端呈现它。我们使用此库为我们的某个产品汇总了API文档，并将其作为GitHub页面发布。

这是一个小而简洁的例子：

<!DOCTYPE html>
<html>
<title>JavaScript API</title>

<xmp theme="united" style="display:none;">

## Print the name

Print the user's name:

```javascript
function printName(name) {
    alert(name);
}
```
</xmp>

<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>

<xmp>标记内的所有内容都会编译为HTML。

注意：根据Mozilla HTML documentation on XMP，XMP代码已被弃用了一段时间。因此，您可能希望破解代码以使其使用PRE或CODE，或者您可能想要考虑使用用于构建Strapdown.js的较低级Marked库。我filed an issue with the Strapdown.js team。

Answer 3

为此你可以使用这个

<pre>
  std::vector&lt;std::string&gt;  get_project_names();    

  template&lt;typename Printable&gt;
  void print(Printable const & item);    

  template&lt;typename FwdIterable, typename Predicate&gt;
  FwdIterable find_if(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>

这将被编码，您将得到您想要的结果。

这是小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/7B9xB/

JavaScript代码

执行此操作的JavaScript方法很简单，您可以将整个代码转换为String变量。

这是

var string = "content here";

然后应用此，

string.replace('<','&lt;').replace('>','&gt;');

转换所有字符，然后由浏览器呈现。

http://jsfiddle.net/afzaal_ahmad_zeeshan/7B9xB/1/

Answer 4

对于我的书，我使用了http://markup.su/highlighter/语法高亮显示器。将代码粘贴到其中，生成突出显示的代码，并将后者粘贴到HTML文档中。工作得很好。这是您的代码的小提琴：http://jsfiddle.net/6GTs2/。

以下是为HTML突出显示的代码：

<pre style="background:#000;color:#f8f8f8">std::vector&lt;std::string>  <span style="color:#89bdff">get_project_names</span>();    

<span style="color:#99cf50">template</span>&lt;<span style="color:#99cf50">typename</span> Printable> 
<span style="color:#99cf50">void</span> <span style="color:#89bdff">print</span>(Printable const &amp; item);    

<span style="color:#99cf50">template</span>&lt;<span style="color:#99cf50">typename</span> FwdIterable, <span style="color:#99cf50">typename</span> Predicate> 
FwdIterable <span style="color:#89bdff">find_if</span>(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>

如何在html中保存c ++模板代码？

4 个答案:

JavaScript代码