如何在博客中顯示代碼段

我在blogger.com上有一個小博客，我使用了一個簡單的免費模板，在那裏找到了。我偶爾會發布關於我的發現的代碼片段。代碼被格式化爲一種非常難看的方式。我看到那裏有一些博客他們有顯示代碼的模板。如何在博客中顯示代碼段

我在哪裏可以找到這樣的博主模板？或者我能做些什麼來達到同樣的目的？

感謝，我

2010-07-08 amok

如何鏈接到一個這樣的博客與花哨的代碼片段？ – 2010-07-08 20:37:48

[我如何在博客博客上更好地顯示代碼？]（http://stackoverflow.com/questions/1644201/how-can-i-display-code-better-on-my-blogger-blog） – paulmorriss 2014-01-17 10:37:25

我有同樣的問題，但通過看本教程來解決它。 – 2013-10-28 21:29:32

我不得不經常插入代碼片段到的相關博客文章。我發現的最簡單的方法是在github上保留一個降價文件，然後將代碼片段複製到博客上。它帶有您所選語言的完整語法高亮顯示。而且沒有插件和直觀，易於使用。

例如，如果您用Ruby編寫，所有你需要做的是寫這

```ruby 
    [Your ruby code goes here] 
```

作爲一個例子，這是一個博客帖子我最近與語法高亮 http://blog.iron.io/2013/09/ironcast-1-introduction-to-ironworker.html

發佈這是與博客文章相對應的降價文件。 https://github.com/iron-io/ironcasts-series-1/blob/master/Code-Snippets.md

PS：如果你想編輯您的降價更快的方法，我也建議http://dillinger.io/快速編輯

來源

2013-09-11 01:10:58 samol

您能否詳細說明「將代碼片段複製到博客」部分的細節？ – Suhas 2013-10-30 22:07:46

@Suhas，因此基本突出顯示您的要點中的代碼片段，然後將其複製並粘貼到blogspot中。這是有效的，因爲副本還會複製所有的html（其中包含突出顯示），並且當html被粘貼到blogspot中時，它將被渲染。 – samol 2013-11-27 06:46:41

頁面不可用 – programtreasures 2017-12-09 15:55:10

您可以使用SyntaxHighlighter，作者提供了一個託管版本，所以你就必須去你的博客模板，選擇編輯HTML和下面的代碼添加到網頁的開頭

<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.0.320/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shCore.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPowerShell.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushDiff.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushBash.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushPlain.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.0.320/scripts/shBrushSql.js' type='text/javascript'/> 
<script type='text/javascript'> 
    SyntaxHighlighter.all(); 
</script>

你可以看到my blog

來源

2010-07-08 20:38:30 oscarkuo

僅供參考，該語法突出顯示的方式很醜陋。只是在一篇關於如何解決這些問題的文章中指出諷刺意味。 :) – cHao 2010-07-08 20:54:34

通常，有插件實現你要找的內容（WordPress的有噸，噸）的例子，但我不知道關於Blogger。

你也許可以使用Javascript來做同樣的事情;這裏有一個例子：http://www.halhelms.com/blog/index.cfm/2008/12/11/Code-Formatting-in-Blog-Pages-with-jQuery

或者這樣： http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html

來源

2010-07-08 20:38:53 amfeng

我掙扎着試圖讓以SyntaxHighlighter的爲長時間工作（Chrome和博客產生可怕的滾動的div）。

我終於落腳Google Code Prettify。它看起來比SyntaxHighlighter更直接，但效果很好。你需要知道

一切都可以在README

負載可以找到腳本的博客模板的<head>部分：

<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js' /> 
<script language='javascript' type='text/javascript' 
    src='http://google-code-prettify.googlecode.com/svn/trunk/src/lang-css.js'/> 

<script type='text/javascript'> 
function addLoadEvent(func) { 
    var oldonload = window.onload; 
    if (typeof window.onload != 'function') { 
    window.onload = func; 
    } else { 
    window.onload = function() { 
     if (oldonload) { 
     oldonload(); 
     } 
     func(); 
    } 
    } 
} 
addLoadEvent(prettyPrint); 
</script>

使用<pre class="prettyprint">或<pre class="prettyprint lang-yaml">'或內嵌<code class="prettyprint">格式。

哦，它支持多種語言和themes。

來源

2011-10-28 23:00:05 TrophyGeek

您也可以從到位桶或要旨嵌入文件從GitHub：

如何：

到位桶（只針對非動態視圖）

創建Bitbucket帳戶，如果您沒有一個
創建存儲庫並推送您的代碼
打開您的源文件之一如this one並點擊嵌入。
將javascript複製到您的文章中。

gist（對於非動態視圖。請參閱下面的動態視圖）

創建一個Github帳戶，如果沒有一個。
轉到Gist，並將您的代碼放在要點中。
創建一個這樣的評論one並點擊嵌入。
拷貝到您的帖子

要點包括Blogger動態的JavaScript訪問量

見Moski's tutorial

來源

2013-06-15 01:56:12 IsKernel

非常感謝:) – 2016-11-08 06:16:11

大多數博客用戶使用BLOCKQUOTE用於顯示的代碼。這是一個非常錯誤的方法。塊引用是爲了顯示來自不同網頁的效果，當用於代碼將它們格式化爲難看的風格時。使用<pre> and <code>標籤顯示您的代碼。瀏覽器會顯示您的代碼，就像他們的意圖。這裏的格式 -

<pre> 
<code> 
your code goes here 
</code> 
</pre>

詳細瞭解爲何使用這些標籤博客 - http://www.howtokickblogger.com/2013/06/blockquote-code-or-pre-tag-for-blogger.html

來源

2013-08-11 19:51:25

我用的是3+ SyntaxHighlighter的JavaScript庫。我爲博客寫了一個簡單的帖子，這是一個更優化的配置。

http://modelarchitecture.blogspot.com/2013/12/configuring-javascript-syntaxhighligher.html

來源

2013-12-25 10:46:54

我實現了一個工具，它可以格式化你的代碼，並顯示在博客。在這裏試試 http://www.dukaweb.net/p/format-source-code.html。

的想法是使用<pre><code>標籤和使用JavaScript

來源

2014-01-06 09:01:52

您可以使用谷歌典，美化它的JavaScript模塊和CSS文件計算行數。這可以幫助您突出顯示代碼片段的語法。網絡領域的許多大牌公司都在使用Google-Code-Prettify爲其網站中的語法突出顯示提供支持，例如code.google.com甚至stackoverflow.com。這是一個method for installing and using Google-Code-Prettify in Blogger。

來源

2014-02-16 13:20:20

如何在博客中顯示代碼段

回答

相關問題