目次
目次

[Cocoon設定] コード

Cocoonマニュアル
この記事は約3分で読めます。
記事内に広告が含まれています。

Cocoon設定→コードについて説明します。

ソースコード設定

ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。
wp-cocoon.com

ハイライト表示

  • ソースコードをハイライト表示する
    オンにすると、設定したCSSセレクタに基づいてソースコードがハイライト表示されます。
  • 行番号を表示する
    オンにすると、ソースコードの左側に行番号が表示されます（デフォルト：最大99行）。
ソースコードに行番号を表示する方法
highlight.jsを用いたソースコード表示に対して、行番号を表示できる機能を追加しました。
wp-cocoon.com

ライブラリ

「コード」ブロック

図1に示す「コード」ブロックでは、表1に示された各種プログラミング言語を選択可能です。

ライブラリ
#Gututenbegエディター言語選択軽量版全て
ハイライト表示しない●●
プレーンテキスト●●
Bash●●
Basic●
C#●●
C++●●
CSS●●
D●
DOS●
Delphi●
Go●●
HTML●●
Haml●
JSON●●
Java●●
JavaScript●●
Less●●
Markdown●●
Objective C●●
PHP●●
Perl●●
Python●●
R●
Ruby●●
Rust●●
SCSS●●
SQL●●
Swift●●
VBScript●
XML●●

ハイライトスタイル

以下のハイライトスタイルを設定します。

  1. a11y-dark
  2. a11y-light
  3. agate
  4. an-old-hope
  5. androidstudio
  6. arduino-light
  7. arta
  8. ascetic
  9. atelier-cave-dark
  10. atelier-cave-light
  11. atelier-dune-dark
  12. atelier-dune-light
  13. atelier-estuary-dark
  14. atelier-estuary-light
  15. atelier-forest-dark
  16. atelier-forest-light
  17. atelier-heath-dark
  18. atelier-heath-light
  19. atelier-lakeside-dark
  20. atelier-lakeside-light
  21. atelier-plateau-dark
  22. atelier-plateau-light
  23. atelier-savanna-dark
  24. atelier-savanna-light
  25. atelier-seaside-dark
  26. atelier-seaside-light
  27. atelier-sulphurpool-dark
  28. atelier-sulphurpool-light
  29. atom-one-dark
  30. atom-one-dark-reasonable
  31. atom-one-light
  32. brown-paper
  33. codepen-embed
  34. color-brewer
  35. darcula
  36. dark
  37. darkula
  38. default
  39. docco
  40. dracula
  41. far
  42. foundation
  43. github
  44. github-gist
  45. gml
  46. googlecode
  47. grayscale
  48. gruvbox-dark
  49. gruvbox-light
  50. hopscotch
  51. hybrid
  52. idea
  53. ir-black
  54. isbl-editor-dark
  55. isbl-editor-light
  56. kimbie.dark
  57. kimbie.light
  58. lightfair
  59. magula
  60. mono-blue
  61. monokai
  62. monokai-sublime
  63. nord
  64. obsidian
  65. ocean
  66. paraiso-dark
  67. paraiso-light
  68. pojoaque
  69. purebasic
  70. qtcreator_dark
  71. qtcreator_light
  72. railscasts
  73. rainbow
  74. school-book
  75. shades-of-purple
  76. solarized-dark
  77. solarized-light
  78. sunburst
  79. tomorrow
  80. tomorrow-night
  81. tomorrow-night-blue
  82. tomorrow-night-bright
  83. tomorrow-night-eighties
  84. vs
  85. vs2015
  86. xcode
  87. xt256
  88. zenburn

ハイライト表示するCSSセレクタ

ソースコードのハイライト表示を適用するCSSセレクタを指定します。

タイトルとURLをコピーしました