代码片段和网络

Question

在网络上显示代码似乎涉及：

编码HTML个实体
正在格式化

因此，最基本的工作流程似乎是：

有一个代码片段，例如：

<html> I'm a full page html snippet <html>.
对其进行编码（使用 google 找到的众多站点之一），例如：

<html> I'm a full page html snippet </html>
将其添加到页面html，如下所示：

<code><pre> <html> I'm a full page html snippet </html> </pre></code>

虽然这有效，但它非常手动，并且在我编写代码片段时失去了作者所见即所得的功能。

（为清楚起见进行了编辑：）

我想要的是这样的：

<body>
  <encodedhtml (src="")>
     I come from somewhere sensible: Inline or a seperate file. All my <, >, ", ', chars are displayed. I am raw html. 
  <encodedhtml>  
</body>

补充说明：

我认为 ERB 可以，但我使用的是 Node & Angular - 我宁愿不用。
Jade 与正常 html 相差甚远，就我的目的而言（对于重量级），我找不到不是的节点模板引擎。还必须小心 angular 并且模板引擎语法不会发生冲突（与 Handlebars 一样）。
我可以使用 angular/javascript 从服务器端提取带有 ajax 的片段，并将它们注入 DOM 但这似乎是错误的。我错了吗？
This post 一半解释了为什么 javascript 没有 ajax 是行不通的。
我听到有关使用 <script> 或 <textarea> 标签的传言，但我还了解到您无法在语法上突出显示 textarea 标签。我可以把它放在 HTML 中，隐藏它，然后用 javascript 得到它的内容并重新显示它吗？是不是太乱了？我找不到例子。
Highlightjs 和 Code-Prettify 都采用编码 HTML：出于基本原因，这似乎是带有语法高亮显示的模式。

Answer 1

What about this?

<!-- html -->
<div ng-app="app">
  <div ng-controller="mainController">
    <pre>{{code}}</pre> <!-- outputs: <div>Hello world</div> -->
  </div> 
</div>

// js (angular)
angular.module('app', []);

function mainController ($scope) { 
  $scope.code = '<div>Hello world</div>';
}

angular
  .module('app')
  .controller('mainController', mainController);

update using angular's $http (ajax)

$http.get("http://www.reddit.com/r/pics/.json?")
  .success(function (result) {
    $scope.code = result
  })

Answer 2

我也在问自己同样的问题。我遇到了 html 页面部分代码片段的问题。它看起来非常可怕且难以维护。

我需要注入 CSS、HTML 和 JS 的代码片段。而且还有代码高亮，让代码更易读易懂。

示例实现位于 elevatezoom-plus demo/examples page

所以我的 solution/explanation 基本上是注入异步资源，如下所示。突出显示是通过 Prism 完成的。这些片段都应该在 /snippets 目录下。
即：

/snippets/code-ezp-e03f.html
/snippets/code-ezp-e03f.css
/snippets/code-ezp-e03f.js
等

HTML（带 id）

<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/snippet-helper/1.0.1/src/snippet-helper.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.8/demo/css/prism.css"/>
<script type="text/javascript" src="https://cdn.rawgit.com/igorlino/elevatezoom-plus/1.1.8/demo/js/prism.js"></script>

<h6>HTML</h6>
<pre><code id="code-ezp-e03f-html"></code></pre>
<h6>JAVASCRIPT</h6>
<pre><code id="code-ezp-e03f-js"></code></pre>
<h6>CSS</h6>
<pre><code id="code-ezp-e03f-css"></code></pre>

框架 JS（片段-helper.js）

var snippetHelper = {};
(function () {
    snippetHelper.loadSnippet = function (filename, ext) {
        jQuery.get('snippets/' + filename + '.' + ext, function (data) {
            var element = $('#' + filename + '-' + ext);
            if (ext === 'html') {
                element.addClass('language-markup');
            }
            if (ext === 'js') {
                element.addClass('language-javascript');
            }
            if (ext === 'css') {
                element.addClass('language-css');
            }
            element.text(data);
            if (Prism) {
                Prism.highlightAll();
            }
        });
    }
    snippetHelper.loadSnippets = function (snippets) {
        $.each(snippets, function (idx, snippet) {
            $.each(snippet.ext.toLowerCase().split(','), function (idx, ext) {
                snippetHelper.loadSnippet(snippet.code, ext)
            });
        });
    }
}());

常规 JS（非 angular 变体）

<script type="text/javascript">
    var snippets = [
        {code: "code-ezp-e01", ext: "html,js"},
        {code: "code-ezp-e02", ext: "html,js"},
        {code: "code-ezp-e03f", ext: "html,js,css"},
        {code: "code-ezp-e12", ext: "html,js"}
    ];
    $(document).ready(function () {
        snippetHelper.loadSnippets(snippets);
    });
</script>

ANGULAR（针对您的场景）

var app = angular.module('yourapp', ['somedependency']);
app.run(function() {
var snippets = [
            {code: "code-ezp-e01", ext: "html,js"},
            {code: "code-ezp-e02", ext: "html,js"},
            {code: "code-ezp-e03f", ext: "html,js,css"},
            {code: "code-ezp-e12", ext: "html,js"}
        ];
        $(document).ready(function () {
            snippetHelper.loadSnippets(snippets);
        });
});

框架JS我已经放在一个免费的开源项目下snippet-helper（免责声明：我是作者）

（免责声明 2：我是免费开源项目 elevatezoom-plus 的维护者）

代码片段和网络

Code snippets and the web

html

javascript

html-entities

angularjs