....
[%hardbreaks]
idは要素そのもののユニークなID、classはCSSの指定でスタイルを指定可能。
これは以下の２通りで表現可能
`[#
..]` <= ##これでよいと思う##
もしくは
`[[]]`
`[role=" ]`
....
[#baz.foo.bar]
----
block
----
もしくは
[[baz]]
[role="foo bar"]
----
block
----
....
:_ZZ: pass:q[kbd:[abc]]
+++ xabc +++
{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へのリンク。``[リンク表示]``
Windowsファイルパスの場合は、``\link:[リンク表示]``
リンク表示名の最後に{caret}（キャレット）を追加すると別ウインドウで開く。{caret}は``[windows=_blank]``の省略表現。
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/[チートシート英語別Window^]
別ウインドウで開く(タイトル無し）↓
https://asciidoctor.org/docs/user-manual/[^]
|
----
https://asciidoctor.org/docs/user-manual/[チートシート英語]
別ウインドウで開く↓
https://asciidoctor.org/docs/user-manual/[チートシート英語別Window^]
別ウインドウで開く(タイトル無し）↓
https://asciidoctor.org/docs/user-manual/[^]
----
|===
== イメージリンク ==
* 通常
+
----
image::im.JPG[代替テキスト,x,y,.... align="right/left/center"]
x,yは表示ピクセル数を指定するか
もしくは%を用いて実際の表示幅からの割合表示が可能
image::im.JPG[代替テキスト,"50%"]
また明示的に記載も可能(width,height)
image::im.JPG[代替テキスト,width="50%"]
----
* インライン（行内)
+
----
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
!=========
|
// 右段落
--
.これが二つ目のブロックになる
. ラベル
. ラベル
--
|================================
....
=== テーブル 飾り
``{startsb}cols=...,opts=...,**frame=none,grid=none,stripes=none**]``
[cols="a,a",frame=none,grid=none]
[%autowidth]
|===
|frame: | 表の枠. none: 無し, all: 全枠, ends: 上下のみ, sides:左右のみ
|grid: | セルの枠. none:無し, all:全セル枠, rows:行のみ, cols:列のみ
|[.nw]##stripes:##| ストライプの背景. none:無し, even:偶数行のみ, odd:奇数行のみ, all: すべて,hover: マウス通過時（HTMLのみ)
|===
== テキストの折り畳み
$$[%collapsible]$$で記述する
[%hardbreaks]
----
.タイトル
[%collapsible]
====
～ ※[%collapsible%open]と指定すると初期状態で展開される
====
----
.折り畳みテキスト
[%collapsible%open]
====
折り畳み内容
====
== インクルード
``include::../../hoge.adoc[]``で別のAsciiDocファイル指定する。
``[]``内にオプションを指定できる
----
\include::path[leveloffset=offset,lines=ranges,tag(s)=name(s),indent=depth,opts=optional]
----
leveloffset= +n:: セクション階層を変更する。＋の数値を指定することで、階層を下げる。マージしたadocのセクション階層と、include先のadocも単独で参照するようなケースに有効です
== ページサイズ
HTML変換すると、A4サイズに出力されてしまう。ページ幅をウインドウサイズで任意に広がるようにするためには、指定されているCSS(スタイルシート）の``max-width:62.5em;``で固定されています。ページ幅を任意にするために``max-width:``[red]##none;##で 上書きすればよい。
.config.docを利用している場合
==================================
[red]##\{ExtendStyle}の次で\{FreePage}を有効にすればよい。##
{ExtendStyle}
//{FreePage} -> コメントアウトを外す
// After need empty-one-line
==================================
.自分で記述する場合
==================================
Adocファイルの上の方で、以下の記述を追加すればよい：
++++
++++
==================================
.参考：変換時に指定されるCSSの記述例
----
...
#header,#content,#footnotes,#footer{width:100%;margin-
left:auto;margin-right:auto;margin-top:0;margin-bottom:0;max-width:62.5em;*zoom:1;position:relative;padding-left:.9375em;padding-right:。
9375em}
....
----
== アンカー(内部参照) ==
* 内部参照へのリンクを表現する。 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: 警告
|===
// 定数リファレンスの組み込み