個別記事のページです

2017年12月20日(水)
このエントリーをはてなブックマークに追加

SyntaxHighlighter(html版)の使い方

こんにちは。更新管理担当のオカベです。
気がついたら2017年も終わりで・・はやい・・・
こないだ年明けた~GWだった~という気分なんですが・・・
年をとるを月日の流れが早く感じるって言いますがこういうことですか?つらいですね

前々回、SyntaxHighlighter Evolvedの使い方の記事を書いた際に
html版も挑戦しますと宣言したのでしたのですが、
このMTに設定するとcssがぶつかりまくってしまいうまくできませんでした・・
htmlの環境では再現できたので手順をまとめておきます。

下記サイトからファイルをダウンロードして解凍してください。

SyntaxHighlighter

解凍するといろんなファイルがあるんですが、
私はcssとscriptフォルダで大丈夫でした。

scriptフォルダにもいっぱいjsがあって何が何やら!だと思うんですが
何を記述するかで変わってくるので下記参考にしてください。

言語名言語の別名ファイル名
ActionScript3as3, actionscript3shBrushAS3.js
Bash/shellbash, shellshBrushBash.js
C#c-sharp, csharpshBrushCSharp.js
C++cpp, cshBrushCpp.js
CSScssshBrushCss.js
Delphidelphi, pas, pascalshBrushDelphi.js
Diffdiff, patchshBrushDiff.js
GroovygroovyshBrushGroovy.js
JavaScriptjs, jscript, javascriptshBrushJScript.js
JavajavashBrushJava.js
JavaFXjfx, javafxshBrushJavaFX.js
Perlperl, plshBrushPerl.js
PHPphpshBrushPhp.js
Plain Textplain, textshBrushPlain.js
PowerShellps, powershellshBrushPowerShell.js
Pythonpy, pythonshBrushPython.js
Rubyrails, ror, rubyshBrushRuby.js
ScalascalashBrushScala.js
SQLsqlshBrushSql.js
Visual Basicvb, vbnetshBrushVb.js
XMLxml, xhtml, xslt, html, xhtmlshBrushXml.js


htmlのhead内にcssを読み込ませます。

171220-2.PNG

htmlの記述はこんな感じです。
171220-3.PNG

htmlとかcss部分を書きたい内容に変える必要があります。

jsの読み込み記述はこんなかんじです。

171220-4.PNG

そしてこれをプレビューすると

171220-1.PNG

こうなります!!!!!
このブログにも実装したいのでcssの整理したいと思います・・・
どうせpreタグとか私しか使わないでしょうし・・・・


書籍の内容と遜色のないPDFを無料プレゼントしております。
売れてる人しか知らない!売れるホームページの10の常識
過度な営業は一切しておりません。

簡単無料お見積もり

問い合せ内容 見積り  相談  更新管理  PPC広告・SEO対策
  • 売上げアップ
  • 会社拡大
  • ブランド力を持ちたい
  • 新規事業参入したい
  • 単価を上げたい
  • 価格競争したくない
  • 社内環境を良くしたい
  • 経営者が楽になる
  • 社員を成長させたい
  • 良い求人が欲しい
  • 離職率を下げたい
  • 残業を減らしたい
  • 客層をよくしたい
  • 会社がうまく回るようにしたい
  • クレームを減らしたい
  • リピート、口コミを増やしたい
  • ターゲットを絞りたい
  • 会社の方針を明確にしたい
  • SEO対策
内容
お問合せ