1. AsciiDoc記法 引用 ブロッククォート

ブログを執筆していると他サイトを引用することがあります。

引用は多様することになるので表現方法や仕組みを理解しておくと後々有用です。

この記事ではAsciiDoc記法の引用表現について調べて理解したことを共有します。

  1. AsciiDoc記法の引用表現：ブロッククォート

  2. マークダウン記法との違い

  3. ブロッククォートのスタイルシート

  4. 引用表現のサンプル

の順にご説明します。

2. AsciiDoc記法の引用表現：ブロッククォート

引用表現をAsciidoctorのリファレンスではブロッククォート（blockquote）と読んでいます。

12.4. ブロッククォート

— Asciidoctor 文法クイックリファレンス(日本語訳)

3. マークダウン記法との違い

マークダウン記法とは異なり

Block attributes

を持つことができます。

これにより、発言者や著者・サイトや著書などの情報を記述することができます。

A block can have multiple block attribute lines. The attributes will be aggregated. If there is a name conflict, the last attribute defined wins.

— 17.2. Metadata
Asciidoctor User Manual

マークダウン記法よりもリッチな引用表現が可能です。

4. ブロッククォートのスタイルシート

引用表現のスタイルをカスタマイズするときにはスタイルシートを理解することが必要です。

また、HUGOなどでAsciidoctorを使用する場合、デフォルトのスタイルが適用されないのでこの場合も独自にスタイルを指定する必要があります。

ここでは引用表現のHTML構文を確認します。

下記が引用表現が出力するHTMLです

引用表現_output.html
<div class="quoteblock">
  <blockquote>
    <div class="paragraph">
      <p>A block. </p>
    </div>
  </blockquote>
  <div class="attribution">
    &#8212; 17.2. Metadata<br>
    <cite><a href="https:">Asciidoctor</a></cite>
  </div>
</div>

そして下記が私の環境で出力されたデフォルトのスタイルシート。

もしかすると文字の大きさなど独自にカスタマイズしているかもしれませんが…。大筋はデフォルトです。

.quoteblock blockquote::before {
  content: "\201c";
  float: left;
  font-size: 2em;
  font-weight: bold;
  line-height: .6em;
  margin-left: -.6em;
  color: #7a2518;
  text-shadow: 0 1px 2px rgba(0,0,0,.1)
}

.quoteblock blockquote,.quoteblock p {
  color: rgba(0,0,0,.85);
  font-size: 1.10rem;
  line-height: 1.75;
  word-spacing: .1em;
  letter-spacing: 0;
  font-style: italic;
  text-align: justify
}

.quoteblock {
  background: #fffef7;
  border-color: #e0e0dc;
  -webkit-box-shadow: 0 1px 4px #e0e0dc;
  box-shadow: 0 1px 4px #e0e0dc
}

.quoteblock {
  padding: 2em 2em 2em 2em;
}

HUGOでAsciidoctorを使用している場合は上記をスタイルシートとして読み込めばそれなりのスタイルで表示できます。

また、独自にカスタマイズする際の参考になるかと思います。

5. 引用表現のサンプル

下記がコードのサンプルと表示例です。

Asciidoc記法　引用
[quote, 17.2. Metadata,'https://asciidoctor.org/docs/user-manual/#blocks[Asciidoctor User Manual]' ]
____
A block can have multiple block attribute lines. The attributes will be aggregated. If there is a name conflict, the last attribute defined wins.
____
HTML表示例

A block can have multiple block attribute lines. The attributes will be aggregated. If there is a name conflict, the last attribute defined wins.

— 17.2. Metadata
Asciidoctor User Manual

6. まとめ

AsciiDocの引用表現は記述量が多くなってしまいますがその分表現力が高いのが嬉しいです。

AsciiDocを利用する方の参考になったのなら幸いです。

今回は以上です。