【WordPress】highlight.jsで人気プログラミング言語2020のコードを表示してみた

WordPressで技術系ブログやプログラミングについての記事を書く場合、コードの埋め込みやコードの表示をしたいという場面が多くあるかと思います。

今回は「プログラミング言語人気ランキング2020」をテーマにhighlight.jsを使ったシンタックスハイライトで各言語のコードを紹介してみます。

MEMO

「シンタックスハイライト」とは
ソースコードの可読性を上げるために色をつけること。
「highlight.js」とは
Webページでプログラムコードを強調＆色付け表示させるためのJavaScript。
対応言語やスタイル種類が多く（189 言語・94 スタイル）、軽量なことが特徴。

結果

どの言語もhighlight.jsのデモ通り、正常に表示できました。

※各言語のコードはhighlight.jsのデモから引用しました。

プログラミング言語人気ランキング 2020年（highlight.jsで表示）

1位 C/C++

#include 

int main(int argc, char *argv[]) {

  /* An annoying "Hello World" example */
  for (auto i = 0; i < 0xFFFF; i++)
    cout << "Hello, World!" << endl;

  char c = '\n';
  unordered_map <string, vector > m;
  m["key"] = "\\\\"; // this is an error

  return -2e3 + 12l;
}

2位 Python

@requires_authorization
def somefunc(param1='', param2=0):
    r'''A docstring'''
    if param1 > param2: # interesting
        print 'Gre\'ater'
    return (param2 - param1 + 1 + 0b10l) or None

class SomeClass:
    pass

>>> message = '''interpreter
... prompt'''

3位 JavaScript

function $initHighlight(block, cls) {
  try {
    if (cls.search(/\bno\-highlight\b/) != -1)
      return process(block, true, 0x0F) +
             ` class="${cls}"`;
    } catch (e) {
    /* handle exception */
  }
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined)
      console.log('undefined');
  }
  return (
  <div>
    <web-component>{block}</web-component>
  </div>
  )
}
export $initHighlight;

4位 SQL

CREATE TABLE "topic" (
    "id" serial NOT NULL PRIMARY KEY,
    "forum_id" integer NOT NULL,
    "subject" varchar(255) NOT NULL
);
ALTER TABLE "topic"
ADD CONSTRAINT forum_id FOREIGN KEY ("forum_id")
REFERENCES "forum" ("id");

-- Initials
insert into "topic" ("forum_id", "subject")
values (2, 'D''artagnian');

5位 C#

using System.IO.Compression;

#pragma warning disable 414, 3021

namespace MyApplication
{
    [Obsolete("...")]
    class Program : IInterface
    {
        public static List JustDoIt(int count)
        {
            Console.WriteLine($"Hello {Name}!");
            return new List(new int[] { 1, 2, 3 })
        }
    }
}

6位 Java

/**
 * @author John Smith <john.smith@example.com>
*/
package l2f.gameserver.model;

public abstract strictfp class L2Char extends L2Object {
  public static final Short ERROR = 0x0001;

  public void moveTo(int x, int y, int z) {
    _ai = null;
    log("Should not be called");
    if (1 > 5) { // wtf!?
      return;
    }
  }
}

7位 VBA（VBScript）

highlight.jsの言語リストにはVBAはなかったので、VBScriptのJSを読み込んで表示させてます。

' creating configuration storage and initializing with default values
Set cfg = CreateObject("Scripting.Dictionary")

' reading ini file
for i = 0 to ubound(ini_strings)
    s = trim(ini_strings(i))

    ' skipping empty strings and comments
    if mid(s, 1, 1) <> "#" and len(s) > 0 then
      ' obtaining key and value
      parts = split(s, "=", -1, 1)

      if ubound(parts)+1 = 2 then
        parts(0) = trim(parts(0))
        parts(1) = trim(parts(1))

        ' reading configuration and filenames
        select case lcase(parts(0))
          case "uncompressed""_postfix" cfg.item("uncompressed""_postfix") = parts(1)
          case "f"
                    options = split(parts(1), "|", -1, 1)
                    if ubound(options)+1 = 2 then
                      ' 0: filename,  1: options
                      ff.add trim(options(0)), trim(options(1))
                    end if
        end select
      end if
    end if
next

8位 HTML/CSS

HTML

<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id='title'>Title</p>
  <!-- here goes the rest of the page -->
</body>

CSS

@font-face {
  font-family: Chunkfive; src: url('Chunkfive.otf');
}

body, .usertext {
  color: #F0F0F0; background: #600;
  font-family: Chunkfive, sans;
  --heading-1: 30px/32px Helvetica, sans-serif;
}

@import url(print.css);
@media print {
  a[href^=http]::after {
    content: attr(href)
  }
}

9位 PHP

require_once 'Zend/Uri/Http.php';

namespace Location\Web;

interface Factory
{
    static function _factory();
}

abstract class URI extends BaseURI implements Factory
{
    abstract function test();

    public static $st1 = 1;
    const ME = "Yo";
    var $list = NULL;
    private $var;

    /**
     * Returns a URI
     *
     * @return URI
     */
    static public function _factory($stats = array(), $uri = 'http')
    {
        echo __METHOD__;
        $uri = explode(':', $uri, 0b10);
        $schemeSpecific = isset($uri[1]) ? $uri[1] : '';
        $desc = 'Multi
line description';

        // Security check
        if (!ctype_alnum($scheme)) {
            throw new Zend_Uri_Exception('Illegal scheme');
        }

        $this->var = 0 - self::$st;
        $this->list = list(Array("1"=> 2, 2=>self::ME, 3 => \Location\Web\URI::class));

        return [
            'uri'   => $uri,
            'value' => null,
        ];
    }
}

echo URI::ME . URI::$st1;

__halt_compiler () ; datahere
datahere
datahere */
datahere

10位 VB.NET(Visual Basic.NET)

Import System
Import System.IO
#Const DEBUG = True

Namespace Highlighter.Test
  ''' <summary>This is an example class.</summary>
  Public Class Program
    Protected Shared hello As Integer = 3
    Private Const ABC As Boolean = False

#Region "Code"
    ' Cheers!
    <STAThread()> _
    Public Shared Sub Main(ByVal args() As String, ParamArray arr As Object) Handles Form1.Click
      On Error Resume Next
      If ABC Then
        While ABC : Console.WriteLine() : End While
        For i As Long = 0 To 1000 Step 123
          Try
            System.Windows.Forms.MessageBox.Show(CInt("1").ToString())
          Catch ex As Exception       ' What are you doing? Well...
            Dim exp = CType(ex, IOException)
            REM ORZ
            Return
          End Try
        Next
      Else
        Dim l As New System.Collections.List<String>()
        SyncLock l
          If TypeOf l Is Decimal And l IsNot Nothing Then
            RemoveHandler button1.Paint, delegate
          End If
          Dim d = New System.Threading.Thread(AddressOf ThreadProc)
          Dim a = New Action(Sub(x, y) x + y)
          Static u = From x As String In l Select x.Substring(2, 4) Where x.Length > 0
        End SyncLock
        Do : Laugh() : Loop Until hello = 4
      End If
    End Sub
#End Region
  End Class
End Namespace

シンタックスハイライトの設定について

大まかな設定などは以下の通りです。

設定メモ

highlight.js を選んだ理由
色々試してみた中で不具合もなくきれいに表示できたからです。
※他にも「Prism.js」や、WordPressプラグイン「Crayon Syntax Highlighter」「Prism For WP」などを試してみましたが、
WordPressやテーマとの相性なのか、表示がずれたりするのが気になりました。
Style（コードの背景や色などの見た目）
「Atom One Dark」を選びました。
※「Ir Black」や「Tomorrow Night」もいい感じです。
highlight.jsのJSの読み込み
コンテンツ配信ネットワーク（CDN）を利用してます。
※WordPressのfunctions.phpにコードを追記。
highlight.jsのCSSの読み込み
本サイトで使っているSANGOの子テーマのstyle.cssに追記してます。
SANGOとの競合
highlight.jsを導入するとSANGOの機能と競合したので、SANGOのコード表示に関するCSS設定を無効にしました。
コード表示が正しくできているかについて
目視ですが、https://highlightjs.org/static/demo/ のデモを見ながら本サイトで紹介するコードが正しく表示されているか確認しました。
‘<‘や’>’の表示について
HTMLやCSSでよく使われる山かっこ（<, >）はテキストエディタ上で以下のように変換してあげる必要があります。
‘<‘　→　’<’
‘>’　→　’>’