#syntaxhighlighter

🔰 Syntax Highlighter làm nổi bật code và syntax trong WordPress

🎯 SyntaxHighlighter là một công cụ giúp làm nổi bật mã nguồn trên trang web của bạn bằng cách áp dụng màu sắc và kiểu chữ phù hợp với ngôn ngữ lập trình.

Download Now

On the website, to include programming code such as CSS, HHTML, JavaScript, JQuery, C ++ or the other, you should use the Syntax Highlighter for explaining to the readers of your website in order to more easily understand the code and easy to copy the code.

Website to be Slow

Yes indeed, your website will be slower; if you use the Syntax Highlighter Online as a source of the program and not made inline, then your website will decrease the speed, so that it will interfere with the performance of your website SEO friendly; especially in the online source many facilities that actually rarely used, so the file size becomes very big.

Make Your Own Syntax Highlighter

It's easy to install Syntax Highlighter into your website, I will give a simple example in applying Syntax Highlighter into your blog; in this example I use blogger. It's easy and simple as the following:

CSS

Open Blogger > Template > Click Edit HTML

Copy and Paste the code below before </head> tag

<style> /* CSS Simple Pre Code */ pre {    background: #fff;    white-space: pre;    word-wrap: break-word;    overflow: auto; } pre.code {    margin: 20px 25px;    border: 1px solid #d9d9d9;    border-radius: 2px;    position: relative;    box-shadow: 0 1px 1px rgba(0,0,0,.08); } pre.code label {    font-family: sans-serif;    font-weight: normal;    font-size: 13px;    color: #444;    position: absolute;    left: 1px;    top: 16px;    text-align: center;    width: 60px;    -webkit-user-select: none;    -moz-user-select: none;    -ms-user-select: none;    pointer-events: none; } pre.code code {    font-family: "Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;    display: block;    margin: 0 0 0 60px;    padding: 15px 16px 14px;    border-left: 1px solid #d9d9d9;    overflow-x: auto;    font-size: 13px;    line-height: 19px;    color: #444; } pre::after {    content: "double click to selection";    padding: 0;    width: auto;    height: auto;    position: absolute;    right: 18px;    top: 14px;    font-size: 12px;    color: #aaa;    line-height: 20px;    overflow: hidden;    -webkit-backface-visibility: hidden;    transition: all 0.3s ease; } pre:hover::after {    opacity: 0;    visibility: visible; } pre.code-css code {    color: #0288d1; } pre.code-html code {    color: #558b2f; } pre.code-javascript code {    color: #f57c00; } pre.code-jquery code {    color: #78909c; } </style>

JavaScript

Copy and Paste the code below before </body> tag

<script type='text/javascript'> //Pre Auto Selection $('i[rel="pre"]').replaceWith(function() {    return $('<pre><code>' + $(this).html() + '</code></pre>'); }); var pres = document.querySelectorAll('pre,kbd,blockquote'); for (var i = 0; i < pres.length; i++) {  pres[i].addEventListener("dblclick", function () {    var selection = getSelection();    var range = document.createRange();    range.selectNodeContents(this);    selection.removeAllRanges();    selection.addRange(range);  }, false); } </script>

The above script function for automatically selecting each perform double-click on the area of pre tag, kbd, and blockquote.

Post

To display Syntax Highlighter into your article, your blog post that you create using a format like the example below:

<pre class='code code-html'><label>HTML</label><code> ... HTML code (which has been parsed) here ... </code></pre> <pre class='code code-css'><label>CSS</label><code> ... CSS code (which has been parsed) here ... </code></pre> <pre class='code code-javascript'><label>JS</label><code> ... JavaScript code (which has been parsed) here ... </code></pre> <pre class='code code-jquery'><label>Jquery</label><code> ... JQuery code (which has been parsed) here ... </code></pre>

Important to note! ; code to be displayed as syntax highlighter should be parsed by XML Escape, for do this you can use online formater like freeformatter.com.

In the example above Syntax Highlighter is limited for the type of HTML, CSS, JAVASCRIPT and JQUERY; using a white background color. You can change according to your favorite color with the edit CSS code.

最近ちゃんと睡眠時間を取っていない私@tumblrです.

ウェブ上でのHighLightで悩んでました. Sublimeや拘りさえしなければ問題ないのですが, ダメな癖が出ました.

ウェブ上でソースコードを載せるときテキストまま載せるのは美しくありません. ブロガーさんたちは SyntaxHighlighter や highlight.js などを使って,ソースコードを見やすくしています. どちらを選ぶかは宗教です. vimかemacsかを選ぶかという問題と同等です.

さてはて, 最初はSyntaxHighlighterを使っていたのですが,Highlight.jsに乗り換えました. そして, この話はまた今度の機会に...

CAPTION FOR IMAGE

キャプションです. 友人に｢付けないとやばくない?｣と言われまして今後はつける方針にしました (ちなみに, 標準語でない). 普段, 画像URLを開いてKeyconfigのショートカットキーでURLだけを取ってきてました... が,タイトル付きのタイプに変えましたの次になります.

Image Link for Markdown

 > [%TITLE%](%URL%)

ショートカットキーはお好きなものを割り当ててください.私はcpでトリガーを引いてます.

おわりに

①htmlのカスタマイズで、syntaxHighlighterのjsを読み込む

/#*html <link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/3.0.83/styles/shCore.css" /> <link rel="stylesheet" type="text/css" href="http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css" /> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shCore.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushJScript.js"> </script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushXml.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushCss.js"></script> <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/3.0.83/scripts/shBrushPhp.js"></script>

②codeの中を整形し、コードの種類を特定るjsを仕込む

/#*js <script type="text/javascript"> // SyntaxHighlighterの実装 $(function(){ /** * 引数1の中の引数2を全て引数3に変換 */ function replaceAll(expression, org, dest){ return expression.split(org).join(dest); } $(".post-content pre").each(function(){ sorce_code = $("code",this).text(); code_type = sorce_code.match(/\/#\*.*/); if (code_type == null) { code_type = "php" } else { code_type = code_type.toString().slice(3); } sorce_code = sorce_code.replace(/\/#\*.*\s/, ""); //<と>を変える。 sorce_code = replaceAll(sorce_code,'<','<'); sorce_code = replaceAll(sorce_code,'>','>'); $(this).html(sorce_code); $(this).addClass('brush: ' + code_type); }); $(".post-content pre").addClass('brush: php'); SyntaxHighlighter.all(); }); </script>

markdownでコードブロックを作る

コードの上に１行空行を作る。

[空行] [spece][spece][spece][spece]/#*<コードの種類> [spece][spece][spece][spece]コードの中身1 [spece][spece][spece][spece]コードの中身2 [spece][spece][spece][spece]コードの中身3 [spece][spece][spece][spece]コードの中身4

テストです．ホントは長々と書きたいのですが時間の都合上SyntaxHighlighterの動作テストだけ行いたいと思います．

ponponpain

ちゃんとなってますぅー?

Javascript code prettifier 測試 由於syntaxhighlighter我實在是搞不起來只好用這個比較簡單的

package com.example.picture.ViewWidget; import edu.deh.make.R; import android.app.*; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; import android.view.View; import android.widget.LinearLayout; public class AudioPlaybackWidget extends View { public AudioPlaybackWidget(Context context) { super(context); AudioPlaybackWidget.inflate(context, R.layout.widget_audioplayback, null); // AudioPlaybackWidget.inflate(context, R.layout.widget_audioplayback, // null); // TODO Auto-generated constructor stub } public AudioPlaybackWidget(Context context, AttributeSet attrs) { super(context, attrs); AudioPlaybackWidget.inflate(context, R.layout.widget_audioplayback, null); // AudioPlaybackWidget.inflate(context, R.layout.widget_audioplayback, // null); // TODO Auto-generated constructor stub } }

使用方法:先切到<html>模式 再把code放在CODE HERE裡面