Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
OrganizationEventAdvent CalendarQiitadon (β)
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

VS Code でフロントマターのある AsciiDoc を扱う

Jekyll とか Hugo とかで AsciiDoc や Markdown を書くとき,ファイルの先頭に YAML (たまに TOML) を入れることがあります.
フロントマター (front matter) と呼ばれるやつです.

title: hello
description: hello to the world

このフロントマターが入った AsciiDoc を VS Code で扱うのにいろいろ設定をしたので,ここにメモしておきます.



AsciiDoc プラグインのインストール

まずは AsciiDoc 用のプラグインをインストールします.

Ctrl+P を押して次のコマンドを叩けば,インストールできます.

ext install joaompinto.asciidoctor-vscode

普通の AsciiDoc 文書を編集するだけなら,もうこれでシンタックスハイライトもプレビュー機能も使えるようになります.

asciidoctor のインストール

フロントマターのある AsciiDoc 文書の場合,シンタックスハイライトは特に問題ないみたいですが,プレビュー機能がうまく動かなかったりします.
例えば,次のような :source-highlighter: を指定した AsciiDoc 文書をプレビューしようとすると,エラーが出てしまいます.

title: hello
description: hello to the world

:source-highlighter: coderay

= hello

A _hello world_ program in C can be writtern as follows:

int main(void) {
    printf("hello, world\n");
    return 0;
CodeRay: uninitialized constant CodeRay

どうやら,プラグインが内部で使用している Asciidoctor.js はフロントマナーをうまく処理できないみたいなので,本家の Asciidoctor をインストールしてそれを使わせるようにします.

というわけで,Asciidoctor をインストールします.
インストールは gem で出来ます.

$ gem install asciidoctor

次のコマンドが通ったら,Asciidoctor のインストールは成功です.

$ asciidoctor --version
Asciidoctor [http://asciidoctor.org]
Runtime Environment (ruby 2.3.1p112 (2016-04-26) [x86_64-linux-gnu]) (lc:UTF-8 fs:UTF-8 in:- ex:UTF-8)

VS Code 側の設定

[File] - [Preferences] - [Settings] を開き,以下の 2 行を追記します.

    "AsciiDoc.use_asciidoctor_js": false,
    "AsciiDoc.asciidoctor_command": "asciidoctor -a skip-front-matter",

これで VS Code を再起動すれば,プレビュー機能も問題なく動作するはず.

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Help us understand the problem. What are the problem?