crayon-catch
 


更新履歴
[2016/10/15]『 プログラム言語とpreタグの書き方』追加
[2016/10/15]テーマ毎、フォント毎に使用している<pre>タグを表記
[2016/10/09]本記事公開

 

こんにちは。kei(@boot_kt)です。

プログラムコードを表示するためにWordPressプラグインとしてCrayon Syntax Highlighterを使っています。
しかし選択できるテーマとフォントがたくさんあってどれがどういう表示になるか分からなかったので全部出してみました。

この記事の概要

  • WordPress
  • Crayon Syntax Highlighter Ver.2.8.4
  • テーマ全種類の表示
  • フォント全種類の表示
  • プログラム言語全種類の一覧


 




テーマの比較

  • フォントはAdobe Source Sans固定
  • 言語はRuby
  • 19-21行はマーク行

1c Kod

<pre class="theme:1c-kod font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="1cKod">

<pre>

1c Zapros

<pre class="theme:1c-zapros font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="1c Zapros">

<pre>

809finest

<pre class="theme:809finest font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="809finest">

<pre>

Ado

<pre class="theme:ado font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Ado">

<pre>

Amity

<pre class="theme:amity font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Amity">

<pre>

Arduino Ide

<pre class="theme:arduino-ide font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Arduino Ide">

<pre>

Bncplusplus

<pre class="theme:bncplusplus font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Bncplusplus">

<pre>

Capacitacionti

<pre class="theme:capacitacionti font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Capacitacionti">

<pre>

Cg Cookie

<pre class="theme:cg-cookie font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Cg Cookie">

<pre>

Cisco Router

<pre class="theme:cisco-router font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Cisco Router">

<pre>

Classic

<pre class="theme:classic font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Classic">

<pre>

Coda Special Board

<pre class="theme:coda-special-board font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Coda Special Board">

<pre>

Coy

<pre class="theme:coy font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Coy">

<pre>

Dark Terminal

<pre class="theme:dark-terminal font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Dark Terminalq">

<pre>

Eclipse

<pre class="theme:eclipse font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Eclipse">

<pre>

Epicgeeks

<pre class="theme:epicgeeks font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Epicgeeks">

<pre>

Familiar

<pre class="theme:familiar font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Familiar">

<pre>

Feeldesign

<pre class="theme:feeldesign font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Feeldesign">

<pre>

Flatui Light

<pre class="theme:flatui-light font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Flatui Light">

<pre>

Github

<pre class="theme:github font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Github">

<pre>

Idle

<pre class="theme:idle font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Idle">

<pre>

Inlellij Idea

<pre class="theme:inlellij-idea font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Inlellij Idea">

<pre>

Iris Vfx

<pre class="theme:iris-vfx font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Iris Vfx">

<pre>

Kaderu

<pre class="theme:kaderu font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Kaderu">

<pre>

Kayote

<pre class="theme:kayote font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Kayote">

<pre>

Light Abite

<pre class="theme:light-abite font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Light Abite">

<pre>

Mirc Dark

<pre class="theme:mirc-dark font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Mirc Dark">

<pre>

Mm Dark Blue

<pre class="theme:mm-dark-blue font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Mm Dark Blue">

<pre>

Monokai

<pre class="theme:monokai font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Monokai">

<pre>

Neon

<pre class="theme:neon font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Neon">

<pre>

Obsidian

<pre class="theme:obsidian font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Obsidian">

<pre>

Obsidian Light

<pre class="theme:obsidian-light font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Obsidian Light">

<pre>

Onderka15

<pre class="theme:onderka15 font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Onderka15">

<pre>

Orange Code

<pre class="theme:orange-code font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Orange Code">

<pre>

Plain White

<pre class="theme:plain-white font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Plain White">

<pre>

Powershell

<pre class="theme:powershell font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Powershell">

<pre>

Powershell Ise

<pre class="theme:powershell-ise font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Powershell Ise">

<pre>

Prism Like

<pre class="theme:prism-like font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Prism Like">

<pre>

Pspad

<pre class="theme:pspad font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Pspad">

<pre>

Qtcreator

<pre class="theme:qtcreator font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Qtcreator">

<pre>

Raygun

<pre class="theme:raygun font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Raygun">

<pre>

Secrets Of Rock

<pre class="theme:secrets-of-rock font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Secrets Of Rock">

<pre>

Shell Default

<pre class="theme:shell-default font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Shell Default">

<pre>

Solarized Dark

<pre class="theme:solarized-dark font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Solarized Dark">

<pre>

Solarized Light

<pre class="theme:solarized-light font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Solarized Light">

<pre>

Son Of Obsidian

<pre class="theme:son-of-obsidian font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Son Of Obsidian">

<pre>

Ssms2012

<pre class="theme:ssms2012 font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Ssms2012">

<pre>

Sublime Text

<pre class="theme:sublime-text font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Sublime Text">

<pre>

Terminal

<pre class="theme:terminal font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Terminal">

<pre>

Tomorrow

<pre class="theme:tomorrow font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Tomorrow">

<pre>

Tomorrow Night

<pre class="theme:tomorrow-night font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Tomorrow Night">

<pre>

Turnwall

<pre class="theme:turnwall font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Turnwall">

<pre>

Twilight

<pre class="theme:twilight font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Twilight">

<pre>

Visual Assist

<pre class="theme:visual-assist font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Visual Assist">

<pre>

Vs2012

<pre class="theme:vs2012 font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Vs2012">

<pre>

Vs2012 Black

<pre class="theme:vs2012-black font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Vs2012 Black">

<pre>

X3info

<pre class="theme:x3info font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="X3info">

<pre>

Xcode

<pre class="theme:xcode font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Xcode">

<pre>

 




 

フォントの比較

  • テーマはVs2012固定
  • 言語はRuby
  • 19-21行はマーク行

Adobe Source Sans

<pre class="theme:vs2012 font:adobe-source-sans lang:ruby mark:19-21 decode:true " title="Adobe Source Sans">

<pre>

Arial

<pre class="theme:vs2012 font:arial lang:ruby mark:19-21 decode:true " title="Arial">

<pre>

Consolas

<pre class="theme:vs2012 font:consolas lang:ruby mark:19-21 decode:true " title="Consolas">

<pre>

Courier New

<pre class="theme:vs2012 font:courier-new lang:ruby mark:19-21 decode:true " title="Courier New">

<pre>

Droid Sans Mono

<pre class="theme:vs2012 font:droid-sans-mono lang:ruby mark:19-21 decode:true " title="Droid Sans Mono">

<pre>

Inconsolata

<pre class="theme:vs2012 font:inconsolata lang:ruby mark:19-21 decode:true " title="Inconsolata">

<pre>

Liberation Mono

<pre class="theme:vs2012 font:liberation-mono lang:ruby mark:19-21 decode:true " title="Liberation Mono">

<pre>

Monaco

<pre class="theme:vs2012 font:monaco lang:ruby mark:19-21 decode:true " title="Monaco">

<pre>

Monospace

<pre class="theme:vs2012 font:monospace lang:ruby mark:19-21 decode:true " title="Monospace">

<pre>

Sourcecodepro

<pre class="theme:vs2012 font:sourcecodepro lang:ruby mark:19-21 decode:true " title="Sourcecodepro">

<pre>

Tahoma

<pre class="theme:vs2012 font:tahoma lang:ruby mark:19-21 decode:true " title="Tahoma">

<pre>

Times

<pre class="theme:vs2012 font:times lang:ruby mark:19-21 decode:true " title="Times">

<pre>

Ubuntu Mono

<pre class="theme:vs2012 font:ubuntu-mono lang:ruby mark:19-21 decode:true " title="Ubuntu Mono">

<pre>

Verdana

<pre class="theme:vs2012 font:verdana lang:ruby mark:19-21 decode:true " title="Verdana">

<pre>

 




 

プログラム言語と<pre>タグの書き方

プログラム言語 <pre>タグへの記述
Default lang:default
1C (3anpoc) lang:1c-zapros
1C (KoД) lang:1c-kod
ABAP lang:abap
ActionScript lang:as
ADA lang:ada
AmigaDOS lang:amigados
Apache lang:apache
AppleScript lang:applescript
Arduino lang:arduino
ASP lang:asp
Assembly (x86) lang:asm
AutoIt lang:autoit
C lang:c
C# lang:c#
C++ lang:c++
Clojure lang:clojure
CoffeeScript lang:coffee
CSS lang:css
Delphi/Pascal lang:delphi
Delphi/WebScript/DWS lang:dws
diff lang:diff
Erlang lang:erlang
Fabric Engine KL lang:kl
Go lang:go
Haskell lang:haskell
INI lang:ini
Inventor iLogic lang:ilogic
Java lang:java
JavaScript lang:js
LESS lang:less
Lisp lang:lisp
Lua lang:lua
MATLAB lang:matlab
MEL lang:mel
Microsoft Registry lang:reg
MIVA Script lang:miva
Monkey lang:monkey
MS DOS lang:batch
MySQL lang:mysql
Objective-C lang:objc
OCaml lang:ocaml
Oracle PL/SQL lang:plsql
Papyrus lang:papyrus
Perl lang:perl
PgSQL lang:pgsql
PHP lang:php
PowerShell lang:ps
Python lang:python
R lang:r
Ruby lang:ruby
Rust lang:rust
Sass lang:sass
Scala lang:scala
Scheme lang:scheme
Shell lang:sh
Swift lang:swift
TeX lang:tex
Transact-SQL lang:tsql
Vim lang:vim
Visual Basic lang:vb
Visual Basic .NET lang:vbnet
XHTML lang:xhtml
YAML lang:yaml
ZSH lang:zsh

 

参考書籍

 


 

 

広告
広告
crayon-catch

プログラミングを楽しもう!

初心者向けのプログラミング教室やってます!
Skype or 対面で対応致します。
C言語、ExcelVBA、Scratch、Linux初歩の初歩といろいろなコースがあります。
※Rubyコース準備中!

小学生のお子さまにはScrachでプログラミングを楽しんで頂けます。

無料体験がありますので、是非お気軽にレッスンを受けてみてください。
プログラミングは楽しいですよ!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUTこの記事をかいた人

Windows/Mac/Linuxを使う現役システムエンジニア&プログラマ。オープン系・組み込み系・制御系・Webシステム系と幅広い案件に携わる。C言語やC#やJava等数多くのコンパイラ言語を経験したが、少し飽きてきたので、最近はRubyやPython、WordPressなどのWeb系を修得中。初心者向けのプログラミング教室も運営中。オンライン・対面・出張等でプログラミングをレッスンします。