代碼段和網絡

-1

它似乎在網頁上顯示的代碼包括：代碼段和網絡

編碼的HTML實體
格式化

一個最基本的工作流程將因此看似是：

有代碼片段如：

<html> I'm a full page html snippet <html>。
進行編碼（使用谷歌的許多網站之一），以如：

<html> I'm a full page html snippet </html>
將它添加到頁面上的HTML如如下：

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

Whi這是有效的，這是非常手動的，並且在我編寫代碼片段時，筆者失去了所見即所得的作者。

（編輯以清晰:)

我只是想是這樣的：

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

其他注意事項：

我覺得再培訓局的工作，但我正在使用節點& Angular - 我寧可不要。
對於我的目的（對於重量級）來說，Jade與正常的html有很大的偏差，我找不到一個不是的節點模板引擎。還必須小心角度和模板引擎語法不會發生衝突（如Handlebars）。
我可以使用angular/javascript從服務器端拉入ajax片段，然後將它們注入到DOM中，但這看起來似乎是錯誤的。我錯了嗎？
This後排序的一半解釋了爲什麼沒有ajax的JavaScript是不會工作的。
我聽到有關使用<script>或<textarea>標籤的傳言，但我也讀過你不能突出顯示textarea標籤的語法。我可以把它放在HTML中，隱藏它，然後使用javascript獲取它的內容並重新顯示它？這太亂了嗎？我找不到例子。
Highlightjs和Code-Prettify都採用編碼HTML：這似乎是與語法熒光筆模式爲fundemental原因。

來源

2015-05-09 Dan

有許多腳本可用於此，無需手動執行。讓谷歌成爲你的朋友 – charlietfl

這是90分鐘的網絡搜索失敗，導致我問...我錯過了一些東西。另外，這個問題是關於「我怎麼不手動做這個」。 – Dan

搜索'javascript syntax highlighter'或'javascript code editor'，具體取決於您想要的用途。不應該有問題找到很多結果 – charlietfl

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 
    })

來源

2015-05-09 21:51:14 azium

非常感謝。我不想在html中做一個字符串，所以我會擴展這個例子來使用AJAX，並從單獨的文件中提取這些「字符串」的HTML。我對這樣做猶豫不決。我可以做？ - 我也更新了這個問題。再次感謝。 – Dan

你在猶豫什麼？這聽起來完全合理，只需使用'$ http'來填充你的'$ scope'變量。聽起來你已經在使用Angular，所以我完全被你的困惑所困惑。 – azium

只需閱讀您的更新。你陷入了實現細節中。 Jade與你的問題無關，而Ajax幾乎是過去10年在網上做所有事情的標準方式。除非我的解決方案的輸出不是你想要的，否則Angular是你所需要的，而沒有別的。 – azium

我問自己同樣的問題。我有幾個代碼段的問題，其中的一部分HTML頁面。它看起來非常可怕並且難以維護。

我需要注入CSS，HTML和JS代碼片段。但也有代碼突出顯示，使代碼更愉快的閱讀和理解。

的示例實現是在elevatezoom-plus demo/examples page

所以我的解決方案/解釋基本上是如下異步的資源注入。突出顯示是通過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) 
      }); 
     }); 
    } 
}());

REGULAR JS（非角變體）

<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的維護者）

來源

2015-06-26 23:31:14

代碼段和網絡

回答

相關問題