Features / 特徴
English :
This extension has the following features:
- Convert ASCII art in code blocks (language: af2s, fig) to SVG.
- Can change from the configuration.
- Output the standard markdown preview to HTML from the command.
- Command: Ascii Figure To Svg (af2s) : Output HTML
- HTML file name: FileName_af2s.html
- When "View Footer" is turned on, HTML is displayed at the end of the preview.
日本語 :
この拡張機能は、Visual Studio Codeの標準Markdownプレビューに以下の機能を追加します。
- コードブロックの言語を「af2s」あるいは「fig」にした際に、コードブロック内のアスキーアートをSVGに変更。
- コマンド（Ctrl+Shift+P）の「Ascii Figure To Svg (af2s) : Output HTML」から、標準Markdownプレビューの変換後HTMLをファイルに出力。
- 「元ファイルの名前_af2s.html」のファイル名で出力。
- 設定の「Path Template Html」に絶対パス、あるいは相対パスを指定すると、自由なHTMLテンプレートで出力可能。
- 設定の「View Footer」をオンにすると、標準Markdownプレビューの末尾にtextareaが追加され、変換後のHTMLの文字列が表示される。
Usages / 使い方
Target / 対象範囲
English :
Convert ASCII art in code blocks (language: af2s, fig) to SVG.
日本語 :
「af2s」「fig」で指定したコード ブロックをSVGに変換します。「af2s」「fig」の名前は設定で変更可能です。以下では「af2s」「fig」のみが変換されます。
```af2s
+---+ +------+
|abc+-->|あいう|
+---+ +------+
```
```js
+---+ +------+
|abc+-->|あいう|
+---+ +------+
```
```fig
+---+ +------+
|abc+-->|あいう|
+---+ +------+
```
Converted sample / 変換サンプル
```af2s
^＾ ^ ^ ^ +------+------+----------------+
^＾|｜ \ | / | 名前 | 年齢 | 出身地 |
+-+＋+＋-+ \|/ +------+------+----------------+
|a|bcＤＥ| <--+--> | 太郎 | 16歳 | 福岡県北九州市 |
<+ |fghi +-> /|\ +------+------+----------------+
<-+-+------+> / | \
|あいうえ| v v v vector /^aaa$/ |a| 1+1
+-+＋+＋-+ -+ +->
|｜vｖ \ | +--+ +--+ +--+ +--+ +--+ +--+
vｖ +-+ | +--+ +--+ +--+ +--+ +--+ |
+----+ +---+ | |
/あいう\ / abc \ + | castle <-------+ |
+えおかき+ \ def / / \ | +-------> お城 |
\くけこ/ +---+ \ / | |
+----+ + +--------------------------------+
＾ --＋ ＋ ＋-- ＾ 🔑😀
＼ ＼／ ＼／ ／ 💻⭐
＼ ／＼｜／＼ ／
＋ --＋-- ＋
／ ＼ ｜ ／ ＼
ｖ ｖ ｖ ｖ
/*@({"y": [1, 1], "x": [17, 3], "isFig": false, "txtAttr": {"fill": "#f00"}})@*/
/*@({"y": [1, 1], "x": [39, 3], "isFig": false, "txtAttr": {"fill": "#f00"}})@*/
/*@({"y": [0, 3], "x": [15, 7], "figAttr": {"fill": "#00f", "stroke": "#00f"}})@*/
/*@({"y": [0, 3], "x": [37, 7], "figAttr": {"fill": "#0f0", "stroke": "#0f0"}})@*/
+-----+ +-----+
インクリメント | i++ | デクリメント | i-- |
+-----+ +-----+
```
Converted SVG / 変換後のSVG
Details / 変換の詳細
English :
Please look at the page "Ascii Figure To Svg".
日本語 :
変換の詳しい使い方は、GitHubの「Ascii Figure To Svg」を参考にして下さい。
「[Ascii Figure To Svg」の変換ルールや、引数の内容などを記載しています。
標準MarkdownのHTML出力
English :
Output the standard markdown preview to HTML from the command.
- Command: Ascii Figure To Svg (af2s) : Output HTML
- HTML file name: FileName_af2s.html
Defalut HTML is below.
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>${title}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css">
</head>
<body>
<article class="markdown-body">
${body}
</article>
</body>
</html>
日本語 :
コマンド（Ctrl+Shift+P）の「Ascii Figure To Svg (af2s) : Output HTML」から、標準Markdownプレビューの変換後HTMLをファイルに出力できます。
標準Markdownプレビューで使用されているmarked-itの処理をフックして、HTMLを抜き出しているので、そのままの内容を保存できます。
出力されるファイル名は、「元ファイルの名前_af2s.html」になるます。
出力時のHTMLのテンプレートを指定することもできます。設定の「Path Template Html」に絶対パス、あるいは相対パスを指定すると、自由なHTMLテンプレートで出力可能です。
相対パスを指定した時は、Markdownに変換したファイルからの相対パスになります。見つからない場合は、プログラムに内蔵されているデフォルトのHTMLテンプレートを利用します。
デフォルトのHTMLテンプレートは以下です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>${title}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@3.0.1/github-markdown.min.css">
</head>
<body>
<article class="markdown-body">
${body}
</article>
</body>
</html>
Output HTML confirmation / 出力HTML確認機能
English :
When "View Footer" is turned on, HTML is displayed at the end of the preview.
日本語 :
設定の「View Footer」をオンにすると、標準Markdownプレビューの末尾にtextareaが追加され、変換後のHTMLの文字列が表示されます。
HTMLファイルに出力するのではなく、コピペでHTMLを利用したい場合は、この機能をオンにするとよいです。
Release Notes
0.1.0
2021-06-16
English :
日本語 :
