include::configJ.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] はじめに:: AsciiDocの記述方法でよくつかうものを記載します。さらに多くの記述を使いたい場合は以下を参照してください。 * https://takumon.github.io/asciidoc-syntax-quick-reference-japanese-translation/[Asciidoctor 文法クイックリファレンス(日本語訳)] * https://asciidoctor.org/docs/user-manual/[ユーザーマニュアル(英語)] == コメント類 コメント部分は、最終出力から除外されます ---- // :行頭でその行はコメントになる ////から//// :ブロック内がすべてコメント ---- == 文字飾り .基本 $$`*_`$$でサンドイッチすることで表現。空白含む場合は $$**単語A 単語B**$$ の様に２個ずつつけるとよい // =============================== [cols="1a,2l", options="header"] |=== ^| 結果 ^| 記述 | [%hardbreaks] *太字の語句* _イタリック_ *_太字のイタリック_* `モノスペース` | *太字の語句* _イタリック_ *_太字のイタリック_* `モノスペース` |=== .少し拡張(アンダーラインなど) // =============================== [cols="2a,3l", options="header"] |=== ^| 結果 ^| 記述 | [%hardbreaks] [.underline]#アンダーライン# 通常文字 vs [.small]#小さい文字# vs [.big]#大きい文字# | [.underline]#アンダーライン# 通常文字 vs [.small]#小さい文字# vs [.big]#大きい文字# |=== == 見た目(ボタンとアイコン) // チェックボックス 文書定義 :cboxOn: pass:normal[``{startsb}✔{endsb}``] :cboxOff: pass:normal[``{startsb}{nbsp}{endsb}``] // チェックボックス GUI定義 :cboxgOn: kbd:[✔] :cboxgOff: kbd:[{nbsp}] [cols="1l,2a", options="header"] |=== | 記述 | 説明 |kbd:[Ctrl+C] | kbd:[Ctrl+C], kbd:[Ctrl+Shift+V] |btn:[ボタン] | btn:[ボタン],btn:[ OK ],btn:[ CANCEL ]など |{cboxOn}/{cboxOff} | {cboxOn}/{cboxOff} 以下の事前マクロ定義必要 + ``$$ :cboxOn: pass:normal[``{startsb}✔{endsb}``] $$ `` + ``$$ :cboxOff: pass:normal[``{startsb}{nbsp}{endsb}``] $$ `` |{cboxgOn}/{cboxgOff} | {cboxgOn}/{cboxgOff} 以下の事前マクロ定義必要 + ``$$ :cboxgOn: kbd:[✔] $$`` + ``$$ :cboxgOff: kbd:[{nbsp}] $$`` |menu:ファイル[保存] |menu:ファイル[保存] |=== == セクション（章節） == ``=␣<セクション>``で始める行がセクションになる。セクションの区切りには空白行が必要。$$=$$の数でセクションレベルが決まる ---- = ドキュメントのタイトル == 章最初のタイトル === 節のタイトル ==== 文節のタイトル ===== さらにその下タイトル ====== さらにさらにタイトル == 章次のタイトル ---- //// 以下は箇条書きのほう ["arabic"] . 階層番号番号 ["decimal"] .. サブ ["arabic"] ... サブサブ ... サブサブ . 階層番号番号 . 階層番号番号 //// == 箇条書き == ``*␣<項目>``、``-␣<項目>``で始める。異なる記号を使えば、階層的に表現できる .箇条書き(項目) // =============================== [cols="a,l", options="header"] |=== ^| 結果 ^| 記述 | - 項目1 * サブ項目1 * サブ項目2 + -- サブ項目の中に複数行に渡る大きな大きな大きな大きなブロックを記述できる -- - 項目2 | - 項目1 * サブ項目1 * サブ項目2 + -- サブ項目の中に複数行に渡る大きな大きな大きな大きなブロックを記述できる -- - 項目2 |=== // =============================== == 箇条書き（数字） == [%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 + -- サブ項目の中にブロックを記述できる -- .... |=== // =============================== == ラベル == ``ラベル::``(後ろのコロン２つ）でラベルをつける。コロンを増やせば階層化できる。 .ラベル // =============================== [cols="a,a", options="header"] |=== ^| 結果 ^| 記述 | 第一項:: 第一項の定義 さらにそのサブ::: サブの内容 | .... 第一項:: 第一項の定義 さらにそのサブ::: サブの内容 .... |=== // ============================== == ブロックラベル == ``.ブロックラベル``(ドット）でラベルをつける。スペースは不要。箇条書き（数字）になってしまう。 :source-highlighter: coderay == ブロック == * ``(バッククウォート)で囲むとパスされる →　<<_エスケープ方法>> // .... // 1. "--" :(ハイフンx2) オープンブロック **汎用的ブロック** // 2. "----" :(ハイフンx4) コードブロック、コードもしくはファイルの表示(リスティング) // 3. "...." :(ドット) リテラルブロック、書いたままに表示させたいとき。 // 4. "====" :(イコール) サンプルブロック 通常サイズで枠ができるがフォーマット // 制御可能 ヘッダ類は無視、[caption="キャプション名変更"] // =の数はいくつでもいいみたい // 5. "++++" :(プラス) 変換せずにHTML出力,パススルー/インライン,バックエンドのマークアップの書式を記述する // 6. "****" :(アスタ) サイドバーブロック // 7. "____" :(アンダーバー) ブロッククウォート（引用かな?） // .... // [%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); ---- .... |=== == 警告、重要、情報などのアイコン // =============================== [cols="a,a", options="header"] |=== ^| 結果 ^| 記述 | NOTE: ノート(NOTE) WARNING: 警告(WARNING) IMPORTANT: 重要(IMPORTANT) TIP: チップス(TIP) CAUTION: 注意(CAUTION) | .... NOTE,WARNING,IMPORTANT,TIP,CAUTION 単行の場合: NOTE: <内容> ブロックの場合: (サンプルブロックを使う) [NOTE] ==== <内容> ==== .... |=== // =============================== == 区切り線 == ``---``（ハイフン）3個のみ。 .区切り線 // =============================== [cols="a,a", options="header"] |=== ^| 結果 ^| 記述 | --- | ``---`` |=== // =============================== == 改行 == [%hardbreaks] * ``␣+``で繋ぐ。 * もしくは**[%hardbreaks]**で段落全体で改行を有効にする（段落毎にリセットされる） .改行 // =============================== [cols="1a,2l", options="header"] |=== ^| 結果 ^| 記述 | １行目 + ２行目 | １行目 + ２行目 |=== // =============================== == コメント == .... // コメント行 //// コメントブロック //// .... == エスケープ方法 == ---- * $$ ～ $$で囲む :通常文字になる * +++ ～ +++で囲む :HTML制御になる(インライン要素) * pass:[xxxx]で囲む :HTML制御になる(インライン要素、同上） * ``～``で囲む :リテラルになる　バッククウォートx2 * \(バックスラッシュ) :次の文字の制御のみをキャンセルする。\*bold*や\{lt}など * その他は<<特殊記号>>で記載すること。 ---- == 特殊記号 == 特殊記号は``{}``を使う .特殊記号の一覧 [cols="1a,3a",options="header"] |========= |記号{nbsp}{nbsp}{nbsp} pass:[* ({}で囲む)] |表現 |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一覧から取れる https://en.wikipedia.org/wiki/Web_colors#HTML_color_names[HTML color names] => だめ 以下の定義みたい(rubyの中):: lib\ruby\gems\2.4.0\gems\asciidoctor-1.5.7.1\data\stylesheets\asciidoctor-default.css お試し:: ==== [green]#■■■■■■■# OK + [red]#■■■■■■■# OK + [blue]#■■■■■■■# OK + [cyan]#■■■■■■■# NG + [magenta]#■■■■■■■# NG + [yellow]#■■■■■■■# + [aqua]#■■■■■■■# OK + [purple]#■■■■■■■# OK + [gray]#■■■■■■■# OK + [black]#■■■■■■■# OK + [maroon]#■■■■■■■# OK + [lime]#■■■■■■■# OK + [fuchsia]#■■■■■■■# OK + [indigo]#■■■■■■■# NG + [rgb(87,86,79)]#■■■■■■■# NG + [𱔤]#■■■■■■■# TEST + [green]#■■■■■■■# + ==== :app-name: MyApp^2^ [subs="specialchars,attributes,quotes,replacements,macros,post_replacements"] The application is called {app-name}. :rrrr: pass:[赤色] :rrrr1: pass:[] :rrrr2: pass:[] adfasd€dfasdfa † renders as † {rrrr1}adfasdf{rrrr2} $$ [[ ]] $$ {example-caption} {figure-caption} Red [red]+++`sum_(i=1)\^n i=(n(n+1))/2`$+++ AsciiMathML formula pass:[赤色] pass:[ライム] pass:[シアン] pass:[シアン] pass:[color ] pass:attributes,quotes[the '{example-caption}'] {lang} menu:File[Save] kbd:[F11] {docdate} {user-home} 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:[リンク表示]$$ 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:[!](ビックリマーク)を使う。それでも完全で無い。 == テーブルを段組に使う技 == 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 !========= | -- .これが二つ目のブロックになる . ラベル . ラベル -- |================================ .表現は以下のとおり .... |================================ | // 左段落 [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 !========= | // 右段落 -- .これが二つ目のブロックになる . ラベル . ラベル -- |================================ .... == アンカー(内部参照) == * 内部参照へのリンクを表現する。 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:␣ で内部パラメータ定義 [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: 警告 |=== // 定数リファレンスの組み込み