ソースコードの種類に応じて、部分的にテキストの色を変えるSyntaxHighlighterというライブラリがありますが、WordPressにはプラグインがあるので簡単に導入する事ができます。 WordPress以外でSyntaxHighlighterの使い方 ソースコードに色をつけるSyntaxHighlighterの導入方法 使うまでの手順 プラグイン新規追加で SyntaxHighlighter Evolved をインストール。 インストール後「使用する」を押してとりあえず完了。 ソースコードに対して、 [html] ソースコード [/html] とマークアップ。 ※[ ]←これは半角で プレビューしてみてください。できましたか? ※この段階で表示できてなかったら、WordPressの外観からheader.phpにと、footer.phpにが入っているか確認してみてください。もし、入ってなければ、はの直前、はの直前に記入してください。 通常のSyntaxHighlighterはpreタグに対してnameとidをつけましたが、WordPressのSyntaxHighlighter Evolvedは[ ]←この括弧に種類を書いてパラメータを書いていきます。 通常表示 [html] 開始する行数の指定 [html firstline="10"] 自動でリンク設定されるURLテキストの解除 [html autolinks="false"] 右上に出るツールバーの解除 [html toolbar="false"] 行数を非表示にする [html gutter="false"] シンプル設定 [html light="true"] 折り畳んで表示 [html collapse="true"] 行を強調させる。カンマで複数設定可能 [html highlight="4,6,8"] ルーラを表示させる [html ruler="true"] Tabの横幅の大きさをかえる [html tabsize="10"] 行数なくしてシンプルに、自動でつくリンクを解除 [html autolinks="false" light="true" highlight="4,6,8"] Action Script [as3] 各言語のbrushと対応JavaScript(SyntaxHighlighter ver.2.0.320) Brush name Brush aliases File name ActionScript3 as3, actionscript3 shBrushAS3.

続きを読む

いろんなブログをみていると、HTML、JavaScript、CSS、XMLやPHPのソースコードを、列番号が割り振られて、かつ部分にフォントカラーが設定されているのを見かけます。「ハイライト」って言うんですね。 WordPressプラグインSyntaxHighlighter Evolvedの使い方はこちら WordPressでソースコードに色をつけるプラグインの使い方:SyntaxHighlighter Evolved まさか人力で設定しているわけでもなさそうですし、どうやってるのか調べてみると、SyntaxHighlighterというJavaScriptとCSSで簡単に導入できるみたいなのでさっそく試してみました。 SyntaxHighlighterのライブラリをダウンロード ダウンロードはこちらから。 配布元:syntaxhighlighter - Google Code 解凍したフォルダー構成。 - Uncompressed - Styles - Script この3つのフォルダーをアップして、 導入したいサイトのheadに下記を書きます。 HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <link type="text/css" rel="stylesheet" href="http://testblog.com/Styles/SyntaxHighlighter.css" /> <script type="text/javascript" src="http://blog.caraldo.net/Script/shCore.js"></script> <!-- 表示したい言語に応じて書きます --> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushJScript.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushCss.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushPhp.js"></script> <script type="text/javascript" src="http://blog.caraldo.net/Script/shBrushXml.js"></script> <!-- window.

続きを読む

プロフィール画像

こたぽん

JavaScript, React, NextJS, VueJS, NuxtJS, AWS, Firebase, Git, ビールと生ハムが好き

Rakuten, Inc. CyberAgent, Inc.