p7d-markdown-it-hr-sandwiched-semantic-container
This extension convert a paragraph group to a semantic group in VS Code's built-in markdown preview.
In markdown specifications, there are three types of Markdown symbols used to generate hr element.
If a paragraph group is sandwiched between two hr elements of the same symbol type, and the first word of the paragraph group has a semantic meaning, then the paragraph group change to a semantic container.
For example, suppose you write the following Markdown:
A paragraph 1.
---
Notice. A paragraph 2.
---
A paragraph 3.
Then it will be converted to the following In VS Code's built-in markdown preview HTML.
<p>A paragraph 1.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A paragraph 2.</p>
</section>
<p>A paragraph 3.</p>
Figure. Visual Studio Code with this Extension
Rule
The notation is as follows:
- Sandwich paragraphs with two horizontal lines of the same symbol type. The symbol type is either
* or - or_.
- Write the word (
Semantics in the example below) that means a semantic container in the string at the beginning of the first paragraph of this group of paragraphs.
- Immediately after the Semantics word, write one of the letters
.:。．： , which is a separator with the normal paragraph.
Notice: In addition, half-width symbols required a space after them. [ver.0.3+]
---
Semantics. A paragraph inside the container.
A paragraph inside the container.
---
The Semantics words are defined as follows. (This word can be in uppercase or lowercase.) You can infer which tag is used for the container by referring to semantics.json.
abstract (要旨,抄録)
acknowledgments (謝辞)
afterword (後書き,あとがき,跋文)
agenda (議題,検討課題,アジェンダ)
alert (警報,アラート)
annotation (注釈)
answer (answers,回答,答え)
appendix ((付録|付属))
assessments (評価,採点)
author (著者)
bibliography ((参考)?文献(一覧)?)
book (magazine,(書籍|雑誌)(情報|案内)?,書誌(情報)?)
caution (注意)
chapter-toc (chapter toc,章目次)
check (チェック,確認事項)
colophon (奥付)
column (コラム)
conclusion (終わりに,おわりに,結び,結論)
credits (クレジット)
danger (危険)
dedication (献呈)
editornote (editor('s)? note,編注)
endnotes (後注,章末注,巻末注)
epigraph (題辞,題句,題言)
epilogue (エピローグ,終幕,終章)
errata (正誤表)
event (イベント(情報|案内)?,行事(情報|案内)?,催し物(情報|案内)?,出来事)
example (例)
faq (ＦＡＱ,よくある(質問|問い合わせ))
feedback (フィードバック)
first-published (first (published|publication),初出)
foreword (((本書|日本語版)?の)?(刊行|発行|発刊)に寄せて)
hint (ヒント)
importance (important, (重要|重大)(情報|なこと)?)
information (info,案内,(参考)?情報,インフォメーション)
index (索引)
interview (インタビュー)
introduction (序論,序説,はじめに,始めに)
issue (問題点,争点)
keywords (キーワード,手がかり(語)?)
lead (リード(文)?,導入(文)?)
memo (メモ)
note (ノート)
notice (通知,通告,告知,掲示,注目,(お)?(し|知)らせ)
opinion (意見,見解,オピニオン)
outline (概略,アウトライン)
overview (概観,大要,あらまし)
planning (plan,計画,案)
point (ポイント,要点,論点)
postscript (追記)
preamble (序,序文)
preface (前書き,まえがき)
problem (問[い題]?)
profile (プロフィール,人物紹介)
prologue (プロローグ,序幕,序章)
proposal (プロポーザル,提言)
pull-quote (pull quote, プル(・)?ク[オォ]ート,抜粋)
qna (Q&A,Ｑ＆Ａ,質疑応答,一問一答,(問(題)?|質問)と(回答|答え))
reference ([レリ]ファレンス,参照,参考)
related-book (related (book|magazine),関連(した)?(本|書籍|雑誌))
related-article (related article,関連(した)?記事)
related-link (related link,関連(した)?リンク)
relation (related,関連)
recommendation (recommend(ed)?,勧告,勧め,推薦,リコメンド)
supplementation (補足(情報)?)
solution (解答,解決(方法)?,解法)
suggestion (suggest,提案,サジェスト)
summary (要約,まとめ,あらすじ)
task (課題)
tip (tips,コツ,秘訣,助言)
toc (目次)
topic (トピック,話題)
warning (warn,警告)
Notice. Currently, this semantics words are unstable.
As a notation, the Semantics word itself may be made into a strong element as follows. In the first example, Semantics converted to a span element, but in this example it is, of course, converted to a strong element.
---
**Semantics.** A paragraph inside the container.
A paragraph inside the container.
---
, or [ver: 0.3+]
---
**Semantics**. A paragraph inside the container.
A paragraph inside the container.
---
Also, there are times when you want to add a heading in a column or the like. Therefore, the following description is also acceptable.
---
### Semantics. The container title.
A paragraph inside the container.
A paragraph inside the container.
---
Notice. This semantic containers can be nested up to three by using different horizontal line symbol types.
I think it would be better to use the symbols themselves for different purposes, with * as the horizontal line, - as the semantic container, and _ as the semantic container inside the semantic container.
Also, when the semantic containers are continuous, you may have one of the front end horizon marks and the back start horizon mark between the two semantic containers.
For example, the following description:
A paragraph 1.
---
Notice. A paragraph 2.
---
---
Notice. A paragraph 3.
---
A paragraph 4.
is the same as below.
A paragraph 1.
---
Notice. A paragraph 2.
---
Notice. A paragraph 3.
---
A paragraph 4.
If the semantics container consists of one paragraph, are you cumbersome to sandwich with two hr elements? Yes, you can omit them. (There is also an option that cannot be omitted.)
A paragraph.
---
Notice. A notice.
---
A paragraph.
is the same as below.
A paragraph.
Notice. A notice.
A paragraph
Notice. You can also choose not to omit two hr element's markdown typing by checking "P7d Markdown It Hr Sandwiched Semantic Container: Require Hr At One Paragraph" of the user settings.
Example
[Markdown]
A paragraph.
---
Notice. A notice.
---
A paragraph.
[HTML]
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<p>A paragraph.</p>
[Markdown]
A paragraph.
---
Notice 1. A notice.
---
A paragraph.
[HTML]
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice 1<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<p>A paragraph.</p>
[Markdown]
A paragraph.
---
**Notice.** A notice.
---
A paragraph.
[HTML]
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><strong class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></strong> A notice.</p>
</section>
<p>A paragraph.</p>
[Markdown]
# Title
A paragraph.
- - -
## Column: Title
A column.
- - -
A paragraph.
[HTML]
<h1>Title</h1>
<p>A paragraph.</p>
<aside class="sc-column">
<h2><span class="sc-column-label">Column<span class="sc-column-label-joint">:</span></span> Title</h2>
<p>A column.</p>
</aside>
<p>A paragraph.</p>
[Markdown]
# A heading.
---
Lead. A lead.
---
A paragraph.
[HTML]
<h1>A heading.</h1>
<section class="sc-lead" aria-label="Lead">
<p>A lead.</p>
</section>
<p>A paragraph.</p>
[Markdown]
# Title
A paragraph.
- - -
## Column: Title
A column.
___
Notice. A column notice.
___
A column.
- - -
A paragraph.
[HTML]
<h1>Title</h1>
<p>A paragraph.</p>
<aside class="sc-column">
<h2><span class="sc-column-label">Column<span class="sc-column-label-joint">:</span></span> Title</h2>
<p>A column.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A column notice.</p>
</section>
<p>A column.</p>
</aside>
<p>A paragraph.</p>
[Markdown]
A paragraph.
---
Notice. A notice.
---
Notice. A notice.
---
A paragraph.
[HTML]
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<p>A paragraph.</p>
[Markdown]
A paragraph.
---
Notice. A notice.
---
---
Notice. A notice.
---
A paragraph.
[HTML]
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<p>A paragraph.</p>
[Markdown]
A paragraph.
---
Notice 1. A notice.
---
A paragraph.
[HTML]
<p>A paragraph.</p>
<section class="sc-notice" role="doc-notice">
<p><span class="sc-notice-label">Notice 1<span class="sc-notice-label-joint">.</span></span> A notice.</p>
</section>
<p>A paragraph.</p>
