Highlighterのフォント一覧ブログ記事やサイトにコードやソースを表示したい!ブログを書いていてプラグインやらデザインやらを軽く紹介したりするのですが、ある時使用しているコードを記事に書いて紹介したくなったのです。!コードをそのまま書くと変換されちゃって、コード自体が表示されない!!でも他のブロガーさんとかも普通に使われているので、何か方法があるはずだ!と探してみました。Highlighter”というプラグイン。良く見かける、1こういうやつですね。これを使うとコードも変換されずに文字列で表示する事ができます。Highlighterのインストールインストールの仕方はいつも通り。Highlighter”と入力し検索します。“今すぐインストール”をクリックし、インストールしたら“有効化”しておきます。Highlighterの設定ダッシュボードの“設定→Crayou”で初期設定が出来ます。基本的にデフォルトで大丈夫だと思いますが、自分のサイトに合わせて初期設定を行っておくと使用する時に便利です。今回は当サイトの設定を載せておきますので良ければ参考にして下さい。テーマ:Vs2012を使用。変更する事でデザインを変えられます。サンプルを下に載せていますので参考にして下さい。フォント:Consolasを使用。サンプルを下に載せています。サイズ:横幅を480に設定し、記事の横幅に合わせて狭めにスマホでもスライドバーが出ない程度に設定しています。ツールバー:あまり使わないと思うので(使用する様な上級者は当サイトに来ない!?)と思い表示しないにしています。行:デフォルトで行表示は外しておいても大丈夫だと。現在はこの記事でサンプル表示させたいので、表示設定しています。コード:単純なコードビューを...のチェックを外しています。その他:“必要な時だけCrayonのCSSとJavaScriptを読み込むように試みる”にチェックを入れ、表示の無い時は読み込みが無いよう設定しています。Highlighterの使い方ではでは使い方ですがとっても簡単。Crayonをインストールすると投稿画面のツールバーに下の画像の<>のようなアイコンが出来ています。このアイコンをクリックすると下の様な画面が表示されます。“ここにコードを記入して下さい”というところにコードを入力します。設定以降は初期設定の欄と同じです。記事に合わせて高さや余白等を設定すると良いでしょう。入力が完了すると右上の“挿入”をクリックします。すると記事の中にコードの書かれた窓が出来ているのでプレビューで確認してみましょう。Highlighterの使用方法は終了です。以下にテーマのとフォントサンプルを載せているので良ければ参考にして下さい。Highlighterのテーマ一覧2行目がテーマの名前です。挿入時の“設定→テーマ”、または初期設定でテーマを変更することでデザインを変える事が出来ます。#fff;}以上です。コメントをキャンセルメールアドレスが公開されることはありません。2016.7多肉植物のキモチが良く判るマンガ!“タニクちゃん”独自ドメイン取得ならここ!おすすめ3社を比較して選ぶ。2016.6最近人気の食中植物“モウセンゴケ”を苔玉にしてみました!星の王子様でもおなじみ、“バオバブの木”の種を播きました。Instagram土のにおいが好きなんだ!はスマホやタブレットに対応。左のQRコードでURLが読み込めます。