// ++++
// <style>
// /* ★スタイル追加はどこに記載されるのか */
// h1{font-size:2em;margin:.67em 0}
// </style>
// ++++

include::config.adoc[]

:toc: left

// adoc-pdf -aで@指定をすればImagesdirはここが優先される
//　書き換えたら遅くなるなる？　rubyが動いてしまう。
// adoc-pdfなどを未使用にすると、遅くなくなった！

:imagesdir: ./

// :lang: ja
// :doctype: bookDir
// :toc-title: 目次
// :toclevels: 3
// :sectnums:
// :sectnumlevels: 4
// :sectlinks:
// :icons: font

// :example-caption: 例
// :table-caption: 表

// example-caption={example-caption}

// 以下でマクロが有効になる
:experimental:


= Adoc使用説明書簡易　(Asciidocの表現を試す)

[%hardbreaks]

:dollar: &#36;
:ddollar: &#36;&#36;

//

// [underlinex]## xxxxx アンダー xxxxx ##

// stylesdir = {stylesdir} 
// stylesheet = {stylesheet} 

//:stylesdir: stylesheets/
//:stylesheet: asciidoctor-default.css

// ++++
// <p style="color: blue; ">はじめてのCSSインラインブロックで閉じた場合</p>
// ++++

// //
// ++++
// <p style="color:blue;">
// ++++
// はじめてのCSS インラインブロックの2つで記述した場合

// //
// ++++
// </p>
// ++++

== はじめに

AsciiDocの記述方法でよくつかうものを記載します。さらに多くの記述を使いたい場合は以下を参照してください。

* https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/[Asciidoctor 文法クイックリファレンス(日本語訳)]
* https://asciidoctor.org/docs/user-manual/[ユーザーマニュアル(英語)]

* https://qiita.com/hbsnow/items/88e1414ac97501af17ff[ Qiita 細かい設定がよくわかる！]

* https://asciidoctor.org/docs/user-manual/#builtin-attributes[ビルドインアトリビュートの一覧]


== コメント類
コメント部分は、最終出力から除外されます
----
 // 			:行頭でその行はコメントになる 
 ////から////	:ブロック内がすべてコメント
----

== 文字飾り

.基本
$$`*_`$$でサンドイッチすることで表現。空白含む場合は $$**単語A 単語B**$$ の様に２個ずつつけるとよい
// ===============================
[cols="1a,2l", options="header"]
|===
^| 結果 ^| 記述 
|
[%hardbreaks]
*太字の語句* 
_イタリック_
*_太字のイタリック_*
`モノスペース`
|
*太字の語句* 
_イタリック_
*_太字のイタリック_*
`モノスペース`
|===

.少し拡張(アンダーラインなど)
// ===============================
[cols="2a,3l", options="header"]
|===
^| 結果 ^| 記述 
|
[%hardbreaks]
[.underline]#アンダーライン#
通常文字 vs [.small]#小さい文字# vs [.big]#大きい文字#

[.line-through]#取り消し線#
|
[.underline]#アンダーライン#
通常文字 vs [.small]#小さい文字# vs [.big]#大きい文字#

[.line-through]#取り消し線#
|===

== 見た目(ボタンとアイコン)
// チェックボックス 文書定義
:cboxOn: pass:normal[``{startsb}&#10004;{endsb}``]
:cboxOff: pass:normal[``{startsb}{nbsp}{endsb}``]
// チェックボックス GUI定義
:cboxgOn: kbd:[&#10004;]
:cboxgOff: kbd:[{nbsp}]



// [cols="1l,2a", options="header"]
[cols="l,a", options="header"]
[%autowidth]
|===
| 記述			| 説明 
|kbd:[Ctrl+C] 	| kbd:[Ctrl+C], kbd:[Ctrl+Shift+V]
|btn:[ボタン] 	| btn:[ボタン],btn:[ OK ],btn:[ CANCEL ]など
|{cboxOn}/{cboxOff} | {cboxOn}/{cboxOff} 以下の事前マクロ定義必要 +
     ``$$ :cboxOn: pass:normal[``{startsb}&#10004;{endsb}``] $$ `` +
 	 ``$$ :cboxOff: pass:normal[``{startsb}{nbsp}{endsb}``] $$ `` 
|{cboxgOn}/{cboxgOff} | {cboxgOn}/{cboxgOff} 以下の事前マクロ定義必要 +
	``$$ :cboxgOn: kbd:[&#10004;] $$`` + 
	``$$ :cboxgOff: kbd:[{nbsp}] $$`` 

|menu:ファイル[保存] |

[%hardbreaks]
menu:ファイル[保存]

階層化$$:$$``>``でサブメニュー化::
	$$menu:ファイル[保存 > Sub > A]$$ +
	->
	menu:ファイル[保存 > Sub > A]

a|
$${OK}$$
|
:OK: pass:[<span style="font-family: monospace">&#x1F600;</span>&#x20;] 
[%hardbreaks]
事前に定義
``$$:OK: pass:[<span style="font-family: monospace">&#x1F600;</span>&#x20;]$$``
{ok}
https://www.asahi-net.or.jp/~ax2s-kmtn/ref/unicode/u1f600.html[アイコンはユニコードで色々定義,Unicodeの絵文字]
&#x1F60D;(``$$&#x1F60D;$$``)、&#x1F645;(``$$&#x1F645;$$``)、&#x1F308;(``$$&#x1F308;$$``) などなど
|===

== セクション（章節） ==
``=␣<セクション>``で始める行がセクションになる。セクションの区切りには空白行が必要。$$=$$の数でセクションレベルが決まる

----
= ドキュメントのタイトル
== 章最初のタイトル
=== 節のタイトル
==== 文節のタイトル
===== さらにその下タイトル
====== さらにさらにタイトル
== 章次のタイトル
----

////
以下は箇条書きのほう
["arabic"]
.  階層番号番号
["decimal"]
	.. サブ
["arabic"]
		... サブサブ
		... サブサブ
.  階層番号番号
.  階層番号番号
////

== 箇条書き ==
* ``*␣<項目>``、``-␣<項目>``で始める。異なる記号を使えば、階層的に表現できる
* 形状変更は``[square]``,``[circle]``,``[disc]``を指定

.箇条書き(項目)
// ===============================
[cols="a,l", options="header"]
|===
^| 結果 ^| 記述 
| - 項目1
	* サブ項目1
	* サブ項目2
+
--
サブ項目の中に複数行に渡る大きな大きなブロックを記述できる
--
- 項目2

.形状変更
[square]
* square

[circle]
* circle

[disc]
* disc

|
- 項目1
	* サブ項目1
	* サブ項目2
+
--
サブ項目の中に複数行に渡る大きな大きな大きな
ブロックを記述できる
--
- 項目2

.形状変更
[square]
* square

[circle]
* circle

[disc]
* disc

|===

// ===============================

== 箇条書き（数字） ==
[%hardbreaks]
``.␣<項目>``（ピリオド）で始める。階層構造は``...␣``と連ねる。
番号は[arabic]/[decimal]/[loweralpha]/[upperroman]などで階層ごとに指定

.箇条書き(数字)
[%hardbreaks]

// ===============================
[cols="a,a", options="header"]
|===
^| 結果 ^| 記述 
|
. 項目1
+
[caption=""] 
.項目1のタイトル
--
サブ項目の中にブロックを記述できる
--
	.. サブ項目1
	.. サブ項目2
[decimal]
	... サブサブ1
	... サブサブ2
+
//"例"を削除
// [caption=""] 
// .テストタイトル
--
サブ項目の中にブロックを記述できる
--

. 項目2

|
....
. 項目1
+
--
サブ項目の中にブロックを記述できる
--
	.. サブ項目1
	.. サブ項目2
[decimal]
	... サブサブ1
	... サブサブ2

+
--
サブ項目の中にブロックを記述できる
--
....

|===
// ===============================

== ラベル ==
* <ラベル名>$$::$$(後ろのコロン２つ）でラベルをつける。コロンを増やせば階層化できる。
* $$[horizontal]$$指定で一行目から、行が開始される

.ラベル
// ===============================
[cols="a,a", options="header"]
|===
^| 結果 ^| 記述 
|
第一項::
	第一項の定義
	さらにそのサブ:::
		サブの内容
|
....
第一項::
	第一項の定義
	さらにそのサブ:::
		サブの内容
....

|===
// ==============================



== ブロックラベル ==
``.ブロックラベル``(ドット）でラベルをつける。スペースは不要。箇条書き（数字）になってしまう。


:source-highlighter: coderay

== ブロック ==
* 以下の記号４文字のキーワード行で囲む。それぞれ動作、意味が異なる
* {ddollar}～ {ddollar}で囲むとパスされる →　<<_エスケープ方法>>

//[%autowidth.stretch]
[cols="1,1,4,20"]
|=====================================================================================
|1|`--` 	|(ハイフンx2) |オープンブロック。 [red]##**汎用ブロック**##。オープンブロックはpassとtableを除き、他のブロックとして機能できます。
|2|`----` 	|(ハイフンx4) |コードブロック。コードもしくはファイルの表示(リスティング)
|3|`$$....$$` 	|(ドット) |リテラルブロック。書いたままに表示させたいとき。
|4|`====`	|(イコール) |サンプルブロック。 通常で枠ができるフォーマット。#[caption="キャプション名"]で制御。``=`` のみで、ナンバリングもキャプションも除去される様子#
|5|`$$++++$$` 	|(プラス) |インラインブロック。変換せずにHTML出力,パススルー/インライン,バックエンドのマークアップの書式を記述する
|6|`$$****$$` 	|(アスタ) |サイドバーブロック
|7|`$$____$$`	|(アンダーバー) |ブロッククウォート（引用かな?）
|=====================================================================================

コードブロックに指定できる言語::
+
====
``C,C++,HTML,Python,Ruby,JavaScript,JSON,Java,XML,YAML
,Clojure,CSS,Delphi,diff,ERB,Go,Groovy,HAML,Lua
,PHP,Sass,SQL,Taskpaper``
====

// ===============================
[cols="a,a", options="header"]
|===
^| 結果 ^| 記述 
|
[source,JavaScript]
.JavaScript例（タイトル）
----
var a = "test";
echo(a,b);
----
|
....
 [source,JavaScript]
 .JavaScript例（タイトル）
 ----
 var a = "test";
 echo(a,b);
 ----
....

|===

== 警告、重要、情報などのアイコン
適用するには属性 ``:icons: font``が必要
// ===============================
[cols="a,a", options="header"]
[%autowidth]
|===
^| 結果 ^| 記述 
|
NOTE: ノート(NOTE)

WARNING: 警告(WARNING)

IMPORTANT: 重要(IMPORTANT)

TIP: チップス(TIP)

CAUTION: 注意(CAUTION)
|
....
NOTE,WARNING,IMPORTANT,TIP,CAUTION

単行の場合:

NOTE: <内容>

ブロックの場合: (サンプルブロックを使う)

[NOTE]
====
<内容>
====
....

|===

.■カスタムアイコンの利用方法
[%hardbreaks]
PNGもしくはSVGデータとしてこれらのアイコンを変更することができます。iconsフォルダにファイル名"NOTE,WARNING,IMPORTANT,TIP,CAUTION"で、拡張子を``.svg``もしくは``.png``のファイルを配置すればよい。

.アイコンの属性を変更
[cols="l,a"]
[%autowidth]
|===
|:icons: image| アイコンのタイプをイメージに変更
|:iconsdir: ./icons | アイコンの配置場所をiconsに変更（未設定だと\{imagesdir}/icons)
|:icontype: svg | 画像の種類を指定 svg or png
|===
IMPORTANT: 属性変更はファイルの先頭がよい。途中で切り換えるとうまくいかない場合があった。

// [horizontal]
※その他方法:: 以下でも一時的に変更することも可能。拡張子は``:icontype: xxx``と同じなら [underline]##拡張子を省略可能##です
+
====
[%hardbreaks]
$$[NOTE, $$ [red]##icon=NoteCustom.svg## ]
$$====$$
$$カスタムNOTEアイコン$$
$$====$$
====

// ===============================

== 区切り線 ==
``---``（ハイフン）3個のみ。

.区切り線
// ===============================
[cols="a,a", options="header"]
|===
^| 結果 ^| 記述 
|
---
|
``---``
|===
// ===============================
== 改行 ==
[%hardbreaks]
* ``␣+``で繋ぐ。
* もしくは``[%hardbreaks]``で段落全体で改行を有効にする（段落毎にリセットされる）。ドキュメント全体で設定するなら``:hardbreaks:``属性をつけるとよい。個別の解除は`` \{set:hardbreaks!} ``。

.改行
// ===============================
[cols="1a,2l", options="header"]
|===
^| 結果 ^| 記述 
|
１行目 +
２行目
|
１行目 +
２行目
|===
// ===============================

== 段落 揃え ==
[%hardbreaks]
* ``[.text-left]``,``[.text-right]``,``[.text-center]``で調整する
* ``[.text-justify]``はよくわからない
* ``[align=xxxx]``、 xxxx=left,center,right,...でもよい


// ===============================
[cols="1a,2l", options="header"]
|===
^| 結果 ^| 記述 
|
[.text-right]
右寄せ
[.text-center]
センター
[.text-left]
左

行内で部分的右 [.right]##[右]## 
|
[.text-right]
右寄せ
[.text-center]
センター
[.text-left]
左
行内で部分的右 [.right]##[右]## 
|===
// ===============================

[.text-right]
This paragraph is aligned right

[.text-center]
This paragraph is aligned center

[.text-left]
This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. This paragraph is aligned left. 

[.text-justified]
This paragraph is justified, which is the default.This paragraph is justified, which is the default.This paragraph is justified, which is the default.This paragraph is justified, which is the default.

== コメント ==
....
// コメント行

////
	コメントブロック
////
....

== エスケープ方法 ==

[cols="^1a,3a",options="header"]
|=========
|記述		|表現
|{ddollar} ～ {ddollar}で囲む 	|通常文字になる
|$$+++～+++$$で囲む	|HTML制御になる(インライン要素)
|$$pass:[～]$$で囲む |HTML制御になる(インライン要素、同上）
|{backslash}(backslash) |次の文字の制御のみキャンセル。{backslash}$$*bold*$$や{backslash}$${lt}$$など
2+<| ※ その他は<<_特殊記号>>で記載すること。
|=========

== 特殊記号 ==

特殊記号は``{}``を使う。もしくは``$$&#<10進数>;$$`` or ``$$&#x<10進数>;$$``など。

.特殊記号の一覧
[cols="^1a,3a",options="header",caption=]
|=========
|記号{nbsp}{nbsp}{nbsp} pass:[* ({}で囲む)]		|表現
|dollar | &#x24;(ドル):{sp}{sp}$$&#36; or &#x24;$$ + 
※これは存在しないので、自身で``$$:dollar: &#36;$$``を定義すること
|sp 	| ``$$ $$ `` スペース１文字
|nbsp 	| ノンブランクスペース文字
|zwsp 	| 幅無スペース
|quot 	| ``$$"$$`` (ダブルクウォート)
|apos   | ``' ``(アポストロフィー}
|backtick| ``{backtick}`` (バッククウォート)
|lsquo  | ``‘``(開始シングルクウォート)
|rsquo  | ``’``(終了シングルクウォート)
|ldquo  | ``“``(開始ダブルクウォート)
|rdquo  | ``”``(終了ダブルクウォート)
|deg 	| ``°``(角度)
|plus 	| ``+``(プラス)
|brvbar | ``¦``
|vbar 	| ``{vbar}``(論理和)
|amp 	| ``&`` (アンパサンド)
|lt		| ``<`` (smaller than)
|gt		| ``>`` (gretar than)
|startsb 		| ``[`` (開始カギカッコ）
|endsb 			| ``]`` (終了カギカッコ)
|caret 			| ``^`` (キャレット)
|asterisk 		| ``*`` (アスタリスク)
|tilde 			| ``~`` (チルダ)
|backslash 		| ``\`` (バックスラッシュ)
|two-colons 	| ``::`` (2つのコロン)
|two-semicolons | ``;;`` (2つのセミコロン)
|cpp  			| ``C++``  (C++?)
|wj 	|
|blank |
|empty |
|=========

== 色 ==

``$$[色 色-background]#コンテンツ#$$``で指定する

====
[red yellow-background]#赤いコンテンツ、黄色の背景# <- ``$$[red yellow-background]## 赤いコンテンツ、黄色の背景 ##$$``
====

* 色名の一覧はwikiのWebColor一覧から取れる
+
--
[%hardbreaks]
https://en.wikipedia.org/wiki/Web_colors#HTML_color_names[HTML color names]
この内の基本の16種の色のみ定義されている
--
**asciidoctor-pdf**は以下の定義みたい(rubyの中)::
	link:c:\Ruby24\lib\ruby\gems\2.4.0\gems\asciidoctor-2.0.10\data\stylesheets[] +
	asciidoctor-default.css

**vs-codeプラグイン**は以下::
	%USERPROFILE%\.vscode\extensions\asciidoctor.asciidoctor-vscode-2.8.3\media\ +
	asciidoctor-default.css

一覧::
+
[cols="a,a,a" align="center"]
|===
[%hardbreaks]
[aqua]##■■■■■■■## aqua
 ``([small]##$$[aqua]##■...■## aqua $$##)``
|[black]##■■■■■■■## black
|[white gray-background]##■■■■■■■## white
|[fuchsia]##■■■■■■■## fuchsia 
|[green]##■■■■■■■## green
|[lime]## ■■■■■■■## lime
|[maroon]## ■■■■■■■## maroon
|[navy]## ■■■■■■■## navy
|[olive]## ■■■■■■■## olive
|[purple]##■■■■■■■## purple
|[red]##■■■■■■■## red
|[silver]## ■■■■■■■## silver
|[teal]## ■■■■■■■## teal
|[yellow]## ■■■■■■■## yellow
|[yellow]## ■■■■■■■## yellow
// [cols="a" options="autowidth" frame="none",grid="all"]
|===

※色を拡張したければインラインで定義するか、CSSを拡張するかです。

.インラインで拡張
====
--
----
:SpanRed: pass:[<span style="color:#FF00FF;background-color:#00FFFF">]
// Spanの終了は共通{SpanEnd}
:SpanEnd: pass:[</span>]
----

:SpanRed: pass:[<span style="color:red;background-color:#00FFFF">]
:SpanEnd: pass:[</span>]
このように定義しておいて +
$${SpanRed} 適当な文字列 {SpanEnd}$$  -> {SpanRed} 適当な文字列 {SpanEnd}
--
====

.CSSで拡張
====
未記載
====

:app-name: MyApp^2^

[subs="specialchars,attributes,quotes,replacements,macros,post_replacements"]
The application is called {app-name}.

[%hardbreaks]

example-caption={example-caption}
figure-caption={figure-caption}

Red [red]+++`sum_(i=1)\^n i=(n(n+1))/2`$+++ <-AsciiMathML formula

pass_attribute=pass:attributes,quotes[<u>the '{example-caption}'</u>]
※ passすると[%hardbreaks]などリセットされちゃう
[%hardbreaks]
lang={lang}
menu=menu:File[Save]
keyboad=kbd:[F11]
docdate={docdate}
user-home={user-home}

== 独自のマクロみたいなの ==
[%hardbreaks]
. HTML文法における `id` / `class` 指定の対応
....
<div id="baz" class="foo bar">
....
[%hardbreaks]
idは要素そのもののユニークなID、classはCSSの指定でスタイルを指定可能。
これは以下の２通りで表現可能
`[#<ID>.<CLASSList1>.<CLASSList1>]`  <=  ##これでよいと思う##
もしくは 
`[[<ID>]]` 
`[role="<CLASSList1> <CLASSList1>]` 

....
	[#baz.foo.bar]
	----
	block
	----
もしくは
	[[baz]]
	[role="foo bar"]
	----
	block
	----
....

:_ZZ: pass:q[kbd:[abc]]
+++ <span class="hide" > xabc </span> +++




{ZZ}
{_ZZ}

https://codeday.me/jp/qa/20190609/971327.html[独自のasciidocマクロを定義する方法]
....
{set:cellbgcolor:gray}
[grid=none, frame=none]
|===
| X >| Y
|===
{set:cellbgcolor!}
....
{set:cellbgcolor:gray}
[grid=none, frame=none]
|===
| X >| Y
|===
{set:cellbgcolor!}

{
|=============
|
{set:cellbgcolor:#FF0000}
a  {cellbgcolor}

|
{set:cellbgcolor:!}
 Cell data 
|=============



// ===============================

== リンク ==
WebページなののURLへのリンク。$$<url>[リンク表示]$$ +
Windowsファイルパスの場合は、$$link:<path>[リンク表示]$$

link:\\santana\Teams\Team-Formstudio\CMM[santanaのCMM]

.タイトル例
// ===============================
[cols="1a,2a", options="header"]
|===

^| 結果 ^| 記述 
|
https://asciidoctor.org/docs/user-manual/[チートシート英語]
|
----
https://asciidoctor.org/docs/user-manual/[チートシート英語]
----
|===

== イメージリンク ==

* 通常
+
----
image::im.JPG[代替テキスト,x,y,.... align="right/left/center"]
----

* インライン（行内)
+
----
		image:im.JPG[代替テキスト]
----

image::im.JPG[代替テキスト,100,300,align="center"]

行で　image:im.JPG[代替テキスト,100,300,align="center"]　をいれる

== テーブル ==
テーブルの表現
.タイトル例
// ===============================
[cols="a,a", options="header"]
|===

^| 結果 ^| 記述 
|
====
[cols="1a,2a", options="header"]
!=========
!c1!c2
!data1!data2
!=========
====

|
[source,ascii]
....
[cols="1a,2a",options="header"]
\|===
\|c1        \|c2
\|data1     \|data2
\|===
....
|その他の細かい記述方法| 


[red]#$$*まだ*$$# +
--
cols=::
	- 番号で列の幅比率
	- a:adoc書式、l(エル):リテラル書式
--
|===

NOTE: テーブル内でテーブルを使う場合(Nested Table)は、pass:[|]の代わりにpass:[!](ビックリマーク)を使う。それでも完全で無い。

寄せの設定::
+
----
[cols="<,>,^"]
----
+
--
|====
|1列目: 左寄せ|2列目: 右寄せ|3列目: 中央寄せ
|====
--

寄せの設定2::
+
----
[cols="{左右}.{上下}, {左右}.{上下}, {左右}.{上下}, ..."]
[cols="{左右}.{上下}, {左右}.{上下}, {左右}.{上下}, ..."]

----
+
--
[cols="<.<3,1"]
|====
|[cols="<.<,"]は 1列目: 左寄せ + 上寄せ
|
2列目1 +
2列目2
|====

[cols=">.>3,1"]
|====
|[cols=">.>,"]は 1列目: 右寄せ + 下寄せ
|
2列目1 +
2列目2
|====
[cols="^.^3,1"]
|====
|[cols="\^.^,"]は 1列目: 中央(左右) + 中央寄せ(上下）
|
2列目1 +
2列目2
|====
--

寄せの設定3::
----
行定義|の左側に<,>,^を記述する方法もある。1列ごとに改行して定義する。
※ヘッダ行とデータ行の間に改行が必要
|item
<|item
>|item
<.^|item
----

##列幅の設定##::
+
----
以下の自動幅autowidth:OK,様々指定方法がある。どれか一つ。
[options="header,autowidth"]
[options="autowidth"]
[%autowidth]
[%header%autowidth]
["%autowidth",cols="a,a",options="header"]
※ a,100aはadoc2pdf変換で失敗 1:40で失敗,最大39でいけた
----


== テーブルを段組に使う技 ==
CAUTION: 「イメージを左、その説明を右」ぐらいの用途。テーブルにテーブルをいれるのが難しいなど、全表現をいれるのに苦労するのでやめたほうがいい。
[title="テーブルを段組みに使う（2分割）",caption="",cols="a,a",frame="none",grid="all"]
// [frame="none",grid="none"]
|================================
|
[caption="",title="画像タイトル名",grid="all"]
image::im.JPG[代替テキスト,100,align="center"]

[caption=""]
.テーブルにテーブルを入れている
[cols="1a,2a", options="header"]
// [frame="none",grid="none"]
!=========
!head a	! head b
!a		! BBBBBB
!=========
|
--
.これが二つ目のブロックになる
. ラベル
. ラベル
--
|================================

.表現は以下のとおり
....
	[title="ｘｘｘ",caption="",cols="a,a",frame="none",grid="all"]
	|================================
	|
	// 左段落
	[caption="",title="画像タイトル名",grid="all"]
	image::im.JPG[代替テキスト,100,align="center"]

	[caption=""]
	.テーブルにテーブルを入れている
	[cols="1a,2a", options="header"]
	// [frame="none",grid="none"]
	!=========
	!head a	! head b
	!a		! BBBBBB
	!=========

	|
	// 右段落
	--
	.これが二つ目のブロックになる
	. ラベル
	. ラベル
	--
	|================================
....

== テキストの折り畳み
$$[%collapsible]$$で記述する
[%hardbreaks]
$$.タイトル$$
$$[%collapsible]$$
$====$
～
$====$


.折り畳みテキスト
[%collapsible]
====
折り畳み内容
====


== アンカー(内部参照) ==

* 内部参照へのリンクを表現する。 pass:[[[]アンカー名 pass:[]]]で設定し、pass:[<<]アンカー名 pass:[>>]で参照する。設定された直後の章名がアンカー表示名になる。
* アンカー参照時の表示名を別名にしたいときは、設定箇所でpass:[[[]アンカー名,表示名pass:[]]]とする。

* デフォルトで、章は、アンカーが設定されており,pass:[<<_]章名pass:[>>](先頭にアンダーバー)で参照できる。vscodeプレビューは日本語でリンクに飛べなかった？

例.
====
<<_イメージリンク>>
====

== 属性設定のサンプル


= その他

. (済)アンカー(内部参照)
. 色名
. 本

== オリジナル先のリンクをしっかりしておこう

https://asciidoctor.org/docs/[トップページ_Asciidoctor Documentation]

https://asciidoctor.org/docs/asciidoc-syntax-quick-reference/[Syntax-quick-ref]

https://asciidoctor.org/docs/asciidoc-writers-guide/[writers-guide]

https://asciidoctor.org/docs/asciidoctor-diagram/[diagram]

https://asciidoctor.org/docs/asciidoc-recommended-practices/[style-guide(draft)]


https://www.methods.co.nz/asciidoc/chunked/ch21.html[macro defineがあるんですけどね]


//=======================================================================================

= Nested Tables

https://mrhaki.blogspot.com/2017/04/awesome-asciidoctor-nested-tables.html[Nested tables]

== Nested tables
 
To nest a table in a table we must
use `!` as table separator instead of `|`.
Also the type of the column or cell
must be set to `a` so Asciidoc markup
is processed.
 
[cols="1,2a"]
|===
| Col 1 | Col 2
 
| Cell 1.1
| Cell 1.2
 
| Cell 2.1
| Cell 2.2
 
[cols="2,1"]
!===
! Col1 ! Col2
 
! C11
! C12
 
!===
 
|===

// =============================== 雑 ========================================================================
MyAp^2^

:app-name: pass:q[MyApp^2^]

{app-name}

[horizontal]
CPUここが長くなってしまうとどうする:: The brain of the computer.
- a
- b
Hard drive:: Permanent storage for operating system and/or user files.
RAM:: Temporarily stores information the CPU uses during operation.

[source,text]
====
+++
.Q and A
[qanda]
アスキードックとは？::    
ルビーで実装されたドキュメントフォーマットである。
What is the answer to the Ultimate Question?:: 42
+++
====

:icons: font

:tip-caption: 💡 
 
[TIP]
It's possible to use Unicode glyphs as admonition icons.
WARNING: It's possible to use Unicode glyphs as admonition icons.


:caution-caption: 💡 

[CAUTION]
It's possible to use Unicode glyphs as admonition icons.
WARNING: It's possible to use Unicode glyphs as admonition icons.

icon:tags[] ruby, asciidocto


[asciimath]
++++
sqrt(4) = 2 
++++


[stem]
++++
sqrt(4)
++++
latexmath:[C = \alpha + \beta Y^{\gamma} + \epsilon


----
An open block can be an anonymous container, or it can masquerade as any other block. pass:[dfsa] 
----

An open block can be an anonymous container, or it can masquerade as any other block. pass:[dfsa] 

{stylesdir}

= まとめ =


== タイトル ==
``。。。``（。。。）

.タイトル例
//===============================
[cols="a,a", options="header"]
|===
^| 結果 ^| 記述 
|
<左列のレンダリング結果>
|
----
<右側列のAsciiDocの記述>
----
|===
//===============================

= 属性関係の設定 =

脱Word、脱Markdown、asciidocでドキュメント作成する際のアレコレ

https://qiita.com/tamikura@github/items/5d3f62dae55617ee42bb#htmlのスタイルcssを設定する[HTMLのスタイル(CSS)を設定する]

....
// :stylesdir:   // どこでも有効になる様子
//:stylesdir:でCSSのフォルダを:stylesheet:でCSSファイルを指定可能

// html-style.adoc
// :stylesdir: stylesheets/
// :stylesheet: asciidoctor-default.css

// pdf-style.adoc
// :pdf-style: themes/default-theme.yml

....

. stylesdir={stylesdir}
. stylesheet={stylesheet}
. pdf-style={pdf-style}

[IMPORTANT]
====

以下のパスを書き換えた：1.2emに。 1.0が今の表示の様子。
C:\Users\AA004035\.vscode\extensions\joaompinto.asciidoctor-vscode-2.7.6\media\asciidoctor-editor.css
....
	.literalblock pre,
	.listingblock>.content>pre:not(.highlight),
	.listingblock>.content>pre[class="highlight"],
	.listingblock>.content>pre[class^="highlight "] {
		font-size: 1.2em;	/*　松尾2em;200%でも変更できる*/
		/* background: #f7f7f8 これ消したら消えた*/
	}
....
====

== テストコード

....
[IMPORTANT]
====
本文の記載
====

単行記述は以下：

IMPORTANT: 本文の記載
....

=====
結局これが一番わかり易いかも
.AsciiDocのチートシート
http://www.venus.dti.ne.jp/~iisaka/DocSys/cheatsheet-ja/asciidoc-869/asciidoc-869.html[AsciiDocのチートシート]
=====

== テストコードの終わり

= 付録

== 属性パラメータ

 * :Keywords:␣ で内部パラメータ定義。キャンセルは``:Keywords!:`` or ``:!Keywords:``。 
 * https://asciidoctor.org/docs/user-manual/#builtin-attributes[その他 ビルドインアトリビュートの一覧]

[cols="1l,1l", options="header"]
|===
| 記述			| 説明 
|:toc: left 	| left,right,macro(別途 toc::[]で場所指示）
|:imagesdir: ./	| イメージDIR		 
|:lang: ja		| 言語指定
|:doctype: book 	|	article/book/manpage/inline(不明)
|:toc-title: 目次 	|	目次のタイトル
|:toclevels: 3 		|	目次の番号レベル
|:sectnums:		 	|	セクションに番号をつけるか?
|:sectnumlevels: 4 	|	セクションの番号レベル
|:sectlinks:	 	|
|:icons: font	 	|	
|:example-caption: 例 |	例ブロック($$====$$)のキャプション
|:table-caption: 表 | テーブルブロック($$====$$)のキャプション
|:experimental:		 |	*マクロを有効するにる
|===

.完全な例
[cols="1l"]
|===
 // 属性定義
:experimental:
 // :module:    モジュール名
:Author:    著者名
:Email:     メールアドレス
:Date:      日付(2020/01/20)
:Revision:  Rev.1
:lang: ja
:doctype: book
:description:
:docname: ドキュメント名

 // 見出し設定
:sectnums:
:chapter-label: 
 // 目次作成
:toc: left
:toclevels: 3
 // ラベルの日本語設定
:toc-title: 目次
:preface-title: はじめに/まえがき
:appendix-caption: 付録
:caution-caption: 注意
:example-caption: 例
:figure-caption: 図
:important-caption: 重要
:last-update-label: 最終更新
:listing-caption: リスト
:manname-title: 名前
:note-caption: 注記
:table-caption: 表
:tip-caption: ヒント
:toc-title: 目次
:untitled-label: 無題
:version-label: バージョン
:warning-caption: 警告
 
|===

// 定数リファレンスの組み込み