More than 5 years have passed since last update.

Windows10にAsciiDoc(Asciidoctor)を導入。VSCode使用。

Last updated at 2018-11-19Posted at 2018-11-18

AsciiDocを教えてもらったので導入方法をメモしたいと思います。

#概要
１．Chocolateyインストール
２．Rubyインストール
３．Asciidoctorインストール
４．CodeRayインストール
５．VSCodeの拡張機能インストール
６．拡張機能の設定
７．使ってみる

#１．Chocolateyインストール
以下を参考にインストールします。
https://chocolatey.org/install

昔自分が書いた記事もあるので、英語でよくわからないという人はこちらもどうぞ。
https://qiita.com/shiro01/items/a300b6d5b572a314ce5e

#２．Rubyインストール
管理者権限でコマンドプロンプトを起動して、ChocolateyでRubyをインストールする。

> choco install ruby

> ruby -v
ruby 2.5.3p105 (2018-10-18 revision 65156) [x64-mingw32]
> gem -v
2.7.6

※rubyコマンドやgemコマンドがない(認識されていません)と言われた場合はコマンドプロンプトを再起動。

#３．Asciidoctorインストール、４．CodeRayインストール
gemコマンドを使用してAsciidoctorとCodeRayをインストールします。

> gem install asciidoctor
> gem install coderay

CodeRayはコードブロックでハイライトするためにインストールしています。

#５．VSCodeの拡張機能インストール
今回はVSCodeの拡張機能を使用してプレビューを見ながら編集したいと思います。
※ChromeやFirefoxにも拡張機能があるので入れるとプレビュー表示できます。

以下の拡張機能を検索してインストールする。
・AsciiDoc

#６．拡張機能の設定
初期設定ではプレビューにAsciidoctor.jsを使用しています。
教えてくれた人曰く、挙動がおかしい時があるそうなのでRuby版のAsciidoctorに変更します。

AsciiDocの説明にある通りsettings.jsonに設定を追加する。

If you want to use the Ruby version of Asciidoctor
you need to change the AsciiDoc.use_asciidoctor_js setting to false.

"AsciiDoc.use_asciidoctor_js": false

以下でも同じ設定ができます。
ショートカットキーCtrl + ,で設定画面を開き、
設定の検索で「asciidoc」を入力して表示された設定画面から、以下のチェックを外して設定する。

Ascii Doc: Use_asciidoctor_js
□ Use asciidoctor js instead of the 'html_generator'

設定は以上です。

#７．使ってみる
ファイルはAsciiDocと認識させるために保存する必要があります。

##保存ファイルの拡張子
保存するファイルの拡張子は以下の3つが使えそうです。
・.asciidoc
・.adoc
・.asc

ただし、.ascはVSCodeでのアイコンが鍵マークになっており調べてみたところ
公開鍵のファイル拡張子としても使われていました。

asciidocかadocを使用したほうが良さそうです。

##表示してみる
VSCodeでAsciiDocを記述したファイル開いた状態で、ウインドウの右上からプレビューを開きます。

開くと以下のように表示されます。

ソースコードをハイライトさせたい場合は以下を先頭に追加する必要があります。

:source-highlighter: coderay

#おわり
いい感じなので使って行こうかと思います。
とりあえず、今回は以上です。