【WordPress】シンプルなシンタックスプラグインHighlighting Code Blockが使いやすい

更新日:

Highlighting Code Block
Highlighting Code Block
Developer: LOOS WEB STUDIO
Price: Free
公式ページで公開されているScreenshots

Highlighting Code Blockの特徴

デザインがシンプルで洗練されています。カスタマイズできる箇所は少ないものの、デザインが完成されているので手を加える必要がありません。

Crayon Syntax Highlighter はテーマも機能も豊富ですが、その分設定項目が多く分かりにくさがあります。

今すぐにソースコードを綺麗に表示したいという方にお勧めできます。

設定できる項目

  1. 設定 > CODE BLOCK をクリックします。
  2. Highlighting Code Block 設定 画面が開きます。

言語名、行数など基本的な設定ができます。

  1. 言語名の表示
  2. 行数の表示
  3. フォントスムージング
  4. コードカラーリング(サイト表示)
  5. コードカラーリング(エディタ内)
  6. フォントサイズ(PC)
  7. font-family: コードのフォント
  8. ブロックエディタのコンテンツ幅
  9. 使用する言語設定
  10. 独自カラーリングファイル
  11. 独自prism.js
  12. ヘルプ

対応言語一覧

標準で設定されている言語以外も追加することができます。

2019/08/06時点では184の言語のシンタックスハイライトに対応しています。

  1. Markup - markup, html, xml, svg, mathml
  2. CSS - css
  3. C-like - clike
  4. JavaScript - javascript, js
  5. ABAP - abap
  6. Augmented Backus–Naur form - abnf
  7. ActionScript - actionscript
  8. Ada - ada
  9. Apache Configuration - apacheconf
  10. APL - apl
  11. AppleScript - applescript
  12. Arduino - arduino
  13. ARFF - arff
  14. AsciiDoc - asciidoc, adoc
  15. 6502 Assembly - asm6502
  16. ASP.NET (C#) - aspnet
  17. AutoHotkey - autohotkey
  18. AutoIt - autoit
  19. Bash - bash, shell
  20. BASIC - basic
  21. Batch - batch
  22. Bison - bison
  23. Backus–Naur form - bnf, rbnf
  24. Brainfuck - brainfuck
  25. Bro - bro
  26. C - c
  27. C# - csharp, cs, dotnet
  28. C++ - cpp
  29. CIL - cil
  30. CoffeeScript - coffeescript, coffee
  31. CMake - cmake
  32. Clojure - clojure
  33. Crystal - crystal
  34. Content-Security-Policy - csp
  35. CSS Extras - css-extras
  36. D - d
  37. Dart - dart
  38. Diff - diff
  39. Django/Jinja2 - django, jinja2
  40. DNS zone file - dns-zone-file, dns-zone
  41. Docker - docker, dockerfile
  42. Extended Backus–Naur form - ebnf
  43. Eiffel - eiffel
  44. EJS - ejs
  45. Elixir - elixir
  46. Elm - elm
  47. ERB - erb
  48. Erlang - erlang
  49. F# - fsharp
  50. Flow - flow
  51. Fortran - fortran
  52. G-code - gcode
  53. GEDCOM - gedcom
  54. Gherkin - gherkin
  55. Git - git
  56. GLSL - glsl
  57. GameMaker Language - gml, gamemakerlanguage
  58. Go - go
  59. GraphQL - graphql
  60. Groovy - groovy
  61. Haml - haml
  62. Handlebars - handlebars
  63. Haskell - haskell, hs
  64. Haxe - haxe
  65. HCL - hcl
  66. HTTP - http
  67. HTTP Public-Key-Pins - hpkp
  68. HTTP Strict-Transport-Security - hsts
  69. IchigoJam - ichigojam
  70. Icon - icon
  71. Inform 7 - inform7
  72. Ini - ini
  73. Io - io
  74. J - j
  75. Java - java
  76. JavaDoc - javadoc
  77. JavaDoc-like - javadoclike
  78. Java stack trace - javastacktrace
  79. Jolie - jolie
  80. JQ - jq
  81. JSDoc - jsdoc
  82. JS Extras - js-extras
  83. JS Templates - js-templates
  84. JSON - json
  85. JSONP - jsonp
  86. JSON5 - json5
  87. Julia - julia
  88. Keyman - keyman
  89. Kotlin - kotlin
  90. LaTeX - latex, tex, context
  91. Less - less
  92. LilyPond - lilypond, ly
  93. Liquid - liquid
  94. Lisp - lisp, emacs, elisp, emacs-lisp
  95. LiveScript - livescript
  96. LOLCODE - lolcode
  97. Lua - lua
  98. Makefile - makefile
  99. Markdown - markdown, md
  100. Markup templating - markup-templating
  101. MATLAB - matlab
  102. MEL - mel
  103. Mizar - mizar
  104. Monkey - monkey
  105. N1QL - n1ql
  106. N4JS - n4js, n4jsd
  107. Nand To Tetris HDL - nand2tetris-hdl
  108. NASM - nasm
  109. nginx - nginx
  110. Nim - nim
  111. Nix - nix
  112. NSIS - nsis
  113. Objective-C - objectivec
  114. OCaml - ocaml
  115. OpenCL - opencl
  116. Oz - oz
  117. PARI/GP - parigp
  118. Parser - parser
  119. Pascal - pascal, objectpascal
  120. Pascaligo - pascaligo
  121. PC-Axis - pcaxis, px
  122. Perl - perl
  123. PHP - php
  124. PHPDoc - phpdoc
  125. PHP Extras - php-extras
  126. PL/SQL - plsql
  127. PowerShell - powershell
  128. Processing - processing
  129. Prolog - prolog
  130. .properties - properties
  131. Protocol Buffers - protobuf
  132. Pug - pug
  133. Puppet - puppet
  134. Pure - pure
  135. Python - python, py
  136. Q (kdb+ database) - q
  137. Qore - qore
  138. R - r
  139. React JSX - jsx
  140. React TSX - tsx
  141. Ren'py - renpy
  142. Reason - reason
  143. Regex - regex
  144. reST (reStructuredText) - rest
  145. Rip - rip
  146. Roboconf - roboconf
  147. Ruby - ruby, rb
  148. Rust - rust
  149. SAS - sas
  150. Sass (Sass) - sass
  151. Sass (Scss) - scss
  152. Scala - scala
  153. Scheme - scheme
  154. Shell session - shell-session
  155. Smalltalk - smalltalk
  156. Smarty - smarty
  157. Soy (Closure Template) - soy
  158. Splunk SPL - splunk-spl
  159. SQL - sql
  160. Stylus - stylus
  161. Swift - swift
  162. TAP - tap
  163. Tcl - tcl
  164. Textile - textile
  165. TOML - toml
  166. Template Toolkit 2 - tt2
  167. Twig - twig
  168. TypeScript - typescript, ts
  169. T4 Text Templates (C#) - t4-cs, t4
  170. T4 Text Templates (VB) - t4-vb
  171. T4 templating - t4-templating
  172. Vala - vala
  173. VB.Net - vbnet
  174. Velocity - velocity
  175. Verilog - verilog
  176. VHDL - vhdl
  177. vim - vim
  178. Visual Basic - visual-basic, vb
  179. WebAssembly - wasm
  180. Wiki markup - wiki
  181. Xeora - xeora, xeoracube
  182. Xojo (REALbasic) - xojo
  183. XQuery - xquery
  184. YAML - yaml, yml

うまく表示されない時には

うまく表示されない時には他のハイライトシンタックスプラグインと競合していないか確認しましょう。

Crayon Syntax Highlighter を有効にしたまま Highlighting Code Block を使ったところ、HTMLタグが文字化けする、paddingが狭すぎる、ファイルの種類が表示されないといった事象が起きました。

参考

-WordPressプラグイン
-, , ,

Copyright© LESS , 2020 All Rights Reserved Powered by STINGER.