1. このページのスタイルについて

このページのスタイルは記事の内容にしたがってAsciicodtor-skinのテーマを反映させています。

別のページとは異なるデザインになっています。

2. Asciidoctor on HUGOでThemeスタイルシートを反映させたい。

以前の記事でも触れたことなのですが、Asciidoctor on HUGOでは記事にAsciidoctorのスタイルが反映されません。

Asciidoctorの記事にスタイルを反映させるには明示的にCSSを適用することが必要です。

とはいえ、設定が必要なスタイルは多岐に渡るので個別にすべて自分でスタイルシートを書くのは大変。

ですので、公開されているテーマを使用したいところです。

公開されているAsciidocotr用のテーマもあります。

公開されているテーマ

darshandsoni/asciidoctor-skins

ただし、単純に上記のCSSを適用させてしまうと記事以外の部分にも反映されてしまいます。

今回、私は記事の部分だけにテーマを適用したい。

色々試してみて記事だけにテーマを適用させる方法を整理したので共有します。

3. Asciidoctor on HUGOではスタイルが適用されない

HUGO上のAsciidoctorではAsciidcotroのスタイルが無視されます。

参考記事

Content Formats @ HUGO

adoc記事をhtmlに変換するために、実際には下記コマンドを実行しています。

実行されるコマンド
asciidoctor: --no-header-footer --safe --trace -

asciidoctorをそのまま実行した場合には例えばHTMLタグやBODYタグ、スタイルなどを同時に出力します。これらの記事の内容ではない部分を除外して記事の部分だけ出力するようにコマンド実行時にオプションを設定しています。HUGOの環境や動作環境を考慮すれば当然の動作です。

しかしながら、記事の部分にスタイルが反映されないため、想定しているデザインと違うという状況が発生します。

4. Asciidoctor-skin.cssを読み込むだけでは記事だけでなくサイト全体にスタイルが反映されてしまう

記事にスタイルが反映されていないので、別途スタイルシートを設定すると記事以外の部分にも干渉してしまいます。

この状況も想定外で厄介な状況です。

5. SASS（SCSS）を使用して記事だけにスタイルを反映する

そこで、記事だけにスタイルを適用する方法を考えました。

特定のクラス、たとえばdiv.contents配下のタグにだけコンテンツを反映します。

そのためにはスタイルシートを編集する必要があります。

div.contents配下のタグだけに反映するスタイルはネスト構造と呼ばれるものでSCSS（SASS）を使用すると簡略化して記述することができます。

5.1. @import を使用する

@import を使用することで外部のscssファイルをインポートすることができます。

この機能を有効活用します。

5.2. cssファイルの拡張子をscssに変更する

@importの機能でcssをインポートするには制限があり不自由なためファイルの拡張子をscssに変更します。

cp adoc-iconic.css adoc-iconic.scss

5.3. scssファイルを作成する

scssファイルを作成します。ネスト構造を使用して記述します。

test.scss
div.contents {
  @import "adoc-iconic";
}

5.4. scssファイルをcssファイルに変換する

変換方法は色々あるのでお調べください。

私はsassコマンドを使用します。

sass  test.scss test.css

5.5. 上記CSSを反映させる

記事ページをdiv.contents配下になるように編集してCSSを適用させます。

6. スタイルシート適用後のサンプル

ifjaofjaja

7. Text formatting

This is a paragraph of regular text.

This is a paragraph with a bold word and an italicized word. Bold italic is also possible.

Words can also have internal bold and italic formatting.

Some constrained monospace text, and some unconstrained monospace text.

Some Superscript® text and some subscript text: H2O.

7.1. Links

The text at the end of this sentence is cross referenced to the third level heading

This is a link to the Asciidoctor User Manual.

This is an attribute reference {quick-uri}[which links this text to the Asciidoctor Quick Reference Guide^].

7.2. Replacements

  • copyright: ©

  • registered trademark: ®

  • trademark: ™

  • em dash (between words): — 

  • ellipses: …​

  • arrows: → ⇒ ← ⇐

  • apostrophe: Sam’s

  • XML entity (e.g., dagger): †

7.3. Math

Find the area under the graph of \$y = x^2\$ between \$x= 1\$ and \$x = 2\$.

\[ \int_1^2 x^2 dx = \left[ \frac{x^3}{3} \right]_1^2 = \frac{2^3}{3} - \frac{1^3}{3} = \frac{7}{3} \]

8. Images

This is the image alt text.
Figure 1. Image caption

9. Footnotes

This is another paragraph.[1]

10. Headings

10.1. Second level heading

10.1.1. Third level heading

Fourth level heading
Fifth level heading

11. Lists

11.1. Unordered lists

Unordered list title

  • list item 1

    • nested list item

      • nested nested list item 1

      • nested nested list item 2

  • list item 2

11.2. Ordered lists

Ordered list title

  1. ordered list item

    1. nested ordered list item

  2. ordered list item

    1. second level list item

      1. third level list item

      2. another third level list item

      3. a final third level list item

    2. another second level list item

You can override the number scheme for any level by setting its style (the first positional entry in a block attribute list). You can also set the starting number using the start attribute:

  1. Five

  2. Six

    1. a

    2. b

    3. c

  3. Seven

11.3. Labelled lists

Here’s an example of a labeled list that identifies parts of a computer:

CPU

The brain of the computer.

Hard drive

Permanent storage for operating system and/or user files.

RAM

Temporarily stores information the CPU uses during operation.

Keyboard

Used to enter text or control items on the screen.

Mouse

Used to point to and select items on your computer screen.

Monitor

Displays information in visual form using text and graphics.

A horizontal labelled list
CPU

The brain of the computer.
Hard drive

Permanent storage for operating system and/or user files.
RAM

Temporarily stores information the CPU uses during operation.
Labelled list with bullets
Diary

  • Milk

  • Eggs

Bakery

  • Bread

Produce

  • Bananas

11.4. Mixed lists

Mixed unordered and ordered lists

  1. Linux

    • Fedora

    • Ubuntu

    • Slackware

  2. BSD

    • FreeBSD

    • NetBSD

Here’s a list that mixes all three types of lists:

Operating Systems

  1. Linux

    • Fedora

    • Ubuntu

    • Slackware

  2. BSD

    • FreeBSD

    • NetBSD

Cloud Providers

  1. PaaS

    • OpenShift

    • CloudBees

  2. IaaS

    • Amazon EC2

    • Rackspace

12. Blocks

Example 1. Example block title

Content in an example block is subject to normal substitutions.

Sidebar title

Sidebars contain aside text and are subject to normal substitutions.

Listing block title
Content in a listing block is subject to verbatim substitutions.
Listing block content is commonly used to preserve code input.

13. Tables

Table 1. A simple table with a title
Column heading 1 Column heading 2

Column 1, row 1

Column 2, row 1

Column 1, row 2

Column 2, row 2
Table 2. A table containing another nested table

\[X_nY_m\]

  • \(X\) a ante \(i\)

  • \(Y\) a ante \(j\)

Trad.

Stock.

Esteq.

14. Quotes

This is a block quote or a prose excerpt. This is subject to normal substitutions.

— firstname lastname
movie title 
This is a verse block.
  Indents and endlines are preserved in verse blocks.
— firstname lastname
poem title and more

15. Admonitions

This is a tip. There are five admonition labels: Tip, Note, Important, Caution and Warning.
This is a note.
This is important.
Caution — be careful!
This is a warning.

15.1. Admonition blocks

A "NOTE" type admonition

This is an example of an admonition block.

Unlike an admonition paragraph, it may contain any AsciiDoc content. The style can be any one of the admonition labels:

  • NOTE

  • TIP

  • WARNING

  • CAUTION

  • IMPORTANT
1. This is footnote text and will be displayed at the bottom of the article.