アクセスランキング FC2blogでSyntax Highlighterを気軽に5分以内で導入する - blogカスタム記録

直列つなぎ。 -とある発達障害者の記録

知識と知識を繋ぐためのblog。 広汎性発達と診断されました。ぜんぜん役に立ってないけど。月収13万円(うち手取り11万)、家賃4万円で生活するひつじ人間。モウマンタイ。

  

FC2blogでSyntax Highlighterを気軽に5分以内で導入する

ブログパーツ 
 
12.27 Syntax Highlighterをインライン化するを追記。
18/1/23 画像を追加

 C#のコードやCSS、HTMLタグ等を美しく見せられるSyntax highlighter。 自分が導入したときは、初回の導入に6時間超(多分)。2回目の導入で1時間ばかりかかってしまいました。

 自分のような人間でも直感的かつスピーディに導入出来るのが理想ですので、このエントリで最短で5分程度で導入出来るとぶち上げてみます。
 


[追記] ここでの対象versionはsyntaxhighlighter_3.0.83.zip ですが、github上でV4が最新版になってまして、ターミナルで自前でビルドしないと導入出来ないとのことです。その分、だいぶシンプルになっているようです。ターミナルというとリナックス系OSになりますので、正直言って良く分かりません。





 参考にした記事
  SyntaxHighlighter を使ってみる(導入編)     

  FC2 ブログでSyntaxHighlighterを使ってソースコードを表示する。

 参考にはなりました。なったんですが、最適解ってわけじゃなかったようなんですね。
 上記2つを合わせた感じです。

以下をHTMLの<head>要素直下に挿入。
 
 
<script type="text/javascript" src="http://blogアドレス/shCore.js" charset="Shift_JIS"></script>

<link type="text/css" rel="stylesheet" href="http://blogアドレス/shCore.css" />
<script type="text/javascript" src="http://blogアドレス/shBrushCSharp.js" charset="Shift_JIS"></script>

<link type="text/css" rel="stylesheet" href="http://blogアドレス/shThemeDefault.css" />
 
<script type="text/javascript">
SyntaxHighlighter.all();
SyntaxHighlighter.config.bloggerMode=true;
<!-- bloggerMode=trueで正常に改行処理-->

</script>
 

 上記をこのままコピペして、http://blogアドレス 部分をコピペで連続で書き換えれば1分で終わりますね。


 挿入位置
      挿入位置


    大体、一番上の方になる筈です。
 失敗すると表示が崩れたり、消えたりすることもあります。「テンプレートの設定」で、「複製」を必ずクリックしておいてください。

Copyリンク



 呼び出しは
  <pre class="brush:csharp"> 対象のコード </pre>となります。

 SyntaxHighlighter.config.bloggerMode=true;がないと
blogでの使用の場合、改行が反映されません。
  
↓こんな風になってしまいます
blogerModeが無効の場合




オリジナルのソースもgithub(https://github.com/syntaxhighlighter/syntaxhighlighter)にないらしいので、自分のとこから持っていてください。FC2blogの「ファイルのアップロード」からup出来ます。

shThemeDefault.css  https://blog-imgs-106.fc2.com/m/o/j/mojakouinfotaker/shThemeDefault.css 
shCore.js https://blog-imgs-106.fc2.com/m/o/j/mojakouinfotaker/shCore.js
shCore.css https://blog-imgs-106.fc2.com/m/o/j/mojakouinfotaker/shCore.css
shBrushCss.js https://blog-imgs-116.fc2.com/m/o/j/mojakouinfotaker/shBrushCss.js

 今公開されているものは何時消えるか分からないので、バックアップ用に残すつもりです。

残りのコードも移植予定。
残り http://pineplanter.moo.jp/non-it-salaryman/2017/04/10/blogger-syntaxhighlighter/

・・・面倒だったので、ソースコードをWayback Machine(https://web.archive.org/)から救出してきました。寄付する価値があるよねこのサービス。余分なカネがあればいつかは。

 syntaxhighlighter_3.0.83.zip




「ファイルのアップロード」画面で種類ごとにソート出来ます。こういう面はhatenaと比べて便利なのでは。
syntax.jpg


 

導入すると読み込みが遅くなるけど?

 

 そういう場合は、async属性を付ければOKです。

  <script type="text/javascript" async>
    SyntaxHighlighter.all();
    SyntaxHighlighter.config.bloggerMode=true;
 <!-- bloggerMode=trueで正常に改行処理-->  </script>



のように書いてやればOKです。HTML5対応。FireFoxの57.0.1で確認。
 時間的にはそんな変わらないようですけどね。表示の読み込みがスムーズになった感があります。

 参照:jsファイルを非同期読み込みにする方法



 このblog、多少重いようなので、サイトの速度改善にも取り組んでみるつもりです。

とりあえず画像圧縮からですね・・・・。





 追記 Syntax Highlighterをインライン化する

 インライン化とは、上述した外部読み込みのSyntax Highlighterを、直接HTML、CSS内に書き込むことです。外部読み込みをすると、ブラウザの読込に時間がかかるようになり、PageSpeed Insightsのスコアも低下します。僅か数秒の違いかと思われますが、出来れば改善しておいた方が良いのですね。




やり方(一つのコードに付き3分程度)

  <script type="text/javascript" src="FC2blogのファイルURL/shBrushCSS.js" charset="Shift_JIS"></script>

  の場合。

  読み込んでいるファイル(ここでは https://blog-imgs-116.fc2.com/m/o/j/mojakouinfotaker/shBrushCSharp.js) 部分を直接ブラウザ上で表示させます。


 全選択→コピー (コメントアウト部分はHTML構文ではないので選択から外してください (-_-;))shBrash全コピー

 


<script type="text/javascript" src="FC2blogのファイルURL/shBrushcSharp.js" charset="Shift_JIS"></script>  を→  <script type="text/javascript">

;(function()
{
から
})();

まで

</script> 

 


   に置き換えます。

 <!-- Syntax Highleiter shBrashCsharp.js--> のようなコメントアウトも書き込んでおくと良いかと思います。


  ↓こんな感じになります

  インライン化-min






<!-- Syntax Highleiter shBrashcSharp.js-->
;(function() { // CommonJS typeof(require) != 'undefined' ? SyntaxHighlighter = require('shCore').SyntaxHighlighter : null; function Brush() { function getKeywordsCSS(str) { return '\\b([a-z_]|)' + str.replace(/ /g, '(?=:)\\b|\\b([a-z_\\*]|\\*|)') + '(?=:)\\b'; }; function getValuesCSS(str) { return '\\b' + str.replace(/ /g, '(?!-)(?!:)\\b|\\b()') + '\:\\b'; }; var keywords = 'ascent azimuth background-attachment background-color background-image background-position ' + 'background-repeat background baseline bbox border-collapse border-color border-spacing border-style border-top ' + 'border-right border-bottom border-left border-top-color border-right-color border-bottom-color border-left-color ' + 'border-top-style border-right-style border-bottom-style border-left-style border-top-width border-right-width ' + 'border-bottom-width border-left-width border-width border bottom cap-height caption-side centerline clear clip color ' + 'content counter-increment counter-reset cue-after cue-before cue cursor definition-src descent direction display ' + 'elevation empty-cells float font-size-adjust font-family font-size font-stretch font-style font-variant font-weight font ' + 'height left letter-spacing line-height list-style-image list-style-position list-style-type list-style margin-top ' + 'margin-right margin-bottom margin-left margin marker-offset marks mathline max-height max-width min-height min-width orphans ' + 'outline-color outline-style outline-width outline overflow padding-top padding-right padding-bottom padding-left padding page ' + 'page-break-after page-break-before page-break-inside pause pause-after pause-before pitch pitch-range play-during position ' + 'quotes right richness size slope src speak-header speak-numeral speak-punctuation speak speech-rate stemh stemv stress ' + 'table-layout text-align top text-decoration text-indent text-shadow text-transform unicode-bidi unicode-range units-per-em ' + 'vertical-align visibility voice-family volume white-space widows width widths word-spacing x-height z-index'; var values = 'above absolute all always aqua armenian attr aural auto avoid baseline behind below bidi-override black blink block blue bold bolder '+ 'both bottom braille capitalize caption center center-left center-right circle close-quote code collapse compact condensed '+ 'continuous counter counters crop cross crosshair cursive dashed decimal decimal-leading-zero default digits disc dotted double '+ 'embed embossed e-resize expanded extra-condensed extra-expanded fantasy far-left far-right fast faster fixed format fuchsia '+ 'gray green groove handheld hebrew help hidden hide high higher icon inline-table inline inset inside invert italic '+ 'justify landscape large larger left-side left leftwards level lighter lime line-through list-item local loud lower-alpha '+ 'lowercase lower-greek lower-latin lower-roman lower low ltr marker maroon medium message-box middle mix move narrower '+ 'navy ne-resize no-close-quote none no-open-quote no-repeat normal nowrap n-resize nw-resize oblique olive once open-quote outset '+ 'outside overline pointer portrait pre print projection purple red relative repeat repeat-x repeat-y rgb ridge right right-side '+ 'rightwards rtl run-in screen scroll semi-condensed semi-expanded separate se-resize show silent silver slower slow '+ 'small small-caps small-caption smaller soft solid speech spell-out square s-resize static status-bar sub super sw-resize '+ 'table-caption table-cell table-column table-column-group table-footer-group table-header-group table-row table-row-group teal '+ 'text-bottom text-top thick thin top transparent tty tv ultra-condensed ultra-expanded underline upper-alpha uppercase upper-latin '+ 'upper-roman url visible wait white wider w-resize x-fast x-high x-large x-loud x-low x-slow x-small x-soft xx-large xx-small yellow'; var fonts = '[mM]onospace [tT]ahoma [vV]erdana [aA]rial [hH]elvetica [sS]ans-serif [sS]erif [cC]ourier mono sans serif'; this.regexList = [ { regex: SyntaxHighlighter.regexLib.multiLineCComments, css: 'comments' }, // multiline comments { regex: SyntaxHighlighter.regexLib.doubleQuotedString, css: 'string' }, // double quoted strings { regex: SyntaxHighlighter.regexLib.singleQuotedString, css: 'string' }, // single quoted strings { regex: /\#[a-fA-F0-9]{3,6}/g, css: 'value' }, // html colors { regex: /(-?\d+)(\.\d+)?(px|em|pt|\:|\%|)/g, css: 'value' }, // sizes { regex: /!important/g, css: 'color3' }, // !important { regex: new RegExp(getKeywordsCSS(keywords), 'gm'), css: 'keyword' }, // keywords { regex: new RegExp(getValuesCSS(values), 'g'), css: 'value' }, // values { regex: new RegExp(this.getKeywords(fonts), 'g'), css: 'color1' } // fonts ]; this.forHtmlScript({ left: /(&lt;|<)\s*style.*?(&gt;|>)/gi, right: /(&lt;|<)\/\s*style\s*(&gt;|>)/gi }); }; Brush.prototype = new SyntaxHighlighter.Highlighter(); Brush.aliases = ['css']; SyntaxHighlighter.brushes.CSS = Brush; // CommonJS typeof(exports) != 'undefined' ? exports.Brush = Brush : null; })();

 



これでインライン化出来ます。ちょっと実験中なので、上手くいかない事も多いかも知れません。

 テンプレートの複製はやっておいてください。FC2の機能で出来ます。

関連記事
スポンサーサイト

 blogカスタム記録

     

0   Comments

Leave a comment