Oceanic Next for highlight.js

2019/04/06 2019/04/05

シンタックスハイライトの highlight.js に好みの配色のスタイルが無かったので、作ってみました。

カラーパレットなどは Oceanic Next Color Scheme と普段使いの Oceanic-Next.vim を参考にしつつ、細かなところは highlight.js に沿って調節しています。

以下、スタイルとサンプルです。

スタイル

/*

Oceanic Next for highlight.js

*/
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  background: #1B2B34;
}

.hljs-link {
  text-decoration: underline;
}

.hljs-comment:not(:lang(ja)),
.hljs-emphasis:not(:lang(ja)) {
  font-style: italic;
}

.hljs-strong:not(:lang(ja)) {
  font-weight: bold;
}

.hljs-comment {
  color: #65737E;
}

.hljs-quote {
  color: #A7ADBA;
}

.hljs-params,
.hljs-selector-pseudo,
.hljs-formula {
  color: #C0C5CE;
}

.hljs,
.hljs-subst {
  color: #CDD3DE;
}

.hljs-name {
  color: #D8DEE9;
}

.hljs-meta-string,
.hljs-variable,
.hljs-bullet,
.hljs-link,
.hljs-selector-tag,
.hljs-template-variable,
.hljs-deletion {
  color: #EC5f67;
}

.hljs-code,
.hljs-meta,
.hljs-meta-keyword,
.hljs-literal,
.hljs-number {
  color: #F99157;
}

.hljs-regexp,
.hljs-type,
.hljs-symbol,
.hljs-class .hljs-title,
.hljs-attr,
.hljs-attribute,
.hljs-strong {
  color: #FAC863;
}

.hljs-string,
.hljs-selector-attr,
.hljs-addition {
  color: #99C794;
}

.hljs-doctag,
.hljs-tag {
  color: #5FB3B3;
}

.hljs-built_in,
.hljs-title,
.hljs-section,
.hljs-builtin-name {
  color: #6699CC;
}

.hljs-keyword,
.hljs-emphasis,
.hljs-selector-class {
  color: #C594C5;
}

.hljs-selector-id,
.hljs-template-tag {
  color: #AB7967;
}

コメントのイタリック体や強調の太字の装飾が不要な際は、冒頭の該当部分をコメントアウト等してください。（2019/04/06 追記：日本語コンテンツではイタリック体と太字を施さないようにしました）

ちなみに、ウェブ全般で、太字やイタリック体によって等幅がずれたり字が被るなどして気になる方は、ユーザースタイルシートで次のようにしておくと良いかもしれません。

pre, pre * {
  font-weight: normal !important;
  font-style: normal !important;
}

サンプル

コード例は highlight.js demo からの引用です。

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>

Markdown

# hello world

you can write text [with links](http://example.com) inline or [link references][1].

* one _thing_ has *em*phasis
* two __things__ are **bold**

[1]: http://example.com

---

hello world
===========

<this_is inline="xml"></this_is>

> markdown is so cool

    so are code segments

1. one thing (yeah!)
2. two thing `i can write code`, and `more` wipee!

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');
  }
}

export  $initHighlight;

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

終わりに

Google で日本語ページに限定して検索すると、いまいち Oceanic Next はヒットしてくれませんが、派手すぎず、くすみすぎず、明暗のバランスが良好で、ここ何年か気に入って使い続けています。

あっ、そうそう。ファイルのダウンロードは付けていません。コピペして、自分好みに使ってくださいね！