Markdown Clip
MarkdownをHTMLに変換し、クリップボードにコピーする機能を提供するVSCode拡張機能です。
English version of README is available here.
インストール
VScodeのマーケットプレイスで「Markdown Clip」と入力してください｡
機能
- 選択したMarkdownテキストをHTMLに変換
- 選択範囲がない場合は、ファイル全体を変換
- 変換したHTMLをクリップボードに自動コピー
- キーボードショートカット（Ctrl+Shift+C）でクイック変換
使用方法
- Markdownファイルを開く
- 変換したい範囲を選択（任意）
- 任意の方法※でコマンドを実行
- クリップボードにHTMLがコピーされます
※コマンドを実行する方法は4種類あります。
- コマンドパレットから「
Copy as HTML」を実行
- 右クリックメニューから「
Copy as HTML」を実行
- Ctrl+Shift+Cを押下して実行
- 上部メニューに表示されるクリップアイコンをクリックして実行
解説
「Markdown Clip」は、markdown-itを利用してMarkdownをHTMLにレンダリングするVScode拡張機能です。特長は、拡張機能を通じてインストールされた「markdown-it plugin」を反映した状態でHTMLに変換できることです。
例えば、「Markdown MojiColor」は%文字%{色}と表記することで簡単に色指定できる拡張機能です。この機能を通じて色設定したMarkdown上で、「Clip as HTML」を実行するときちんとHTMLにも反映されます。
%文字%{空色} // 変換前
<p><span style="color: #a0d8ef;">文字</span></p> // 変換後
このように Markdown Clip は、任意のプラグインを反映させた状態でMarkdownをHTMLに変換しクリップボードにコピーできるツールです。
設定オプション
1．見出しID制御
Heading ID: Remove: 見出しの自動ID生成を制御（デフォルト: true）
- true: 自動生成されるIDを削除
- false: IDを保持
「Markdown Clip」はmarkdown-itを利用し、HTMLにレンダリングしています。例えば、# タイトルをレンダリングしますと、<h1 id="タイトル">タイトル</h1>のように自動でidが生成されます。
# タイトル // 変換前
<h1 id="タイトル">タイトル</h1> // 変換後
特に日本語など英語圏以外の言語を利用している方は、この自動生成されるタイトルが文字化けすることが多く、Wordpressに投稿する下書きとしてMarkdownを使用している方にとって使いづらい機能です。
そこで、この機能をOFFにする設定を追加しました（デフォルトはtrue）。
# タイトル // 変換前
<h1>タイトル</h1> // 変換後
2．カスタムID制御
Markdown-it-attrs: Enable: カスタムID機能の有効化（デフォルト: true）
- true: Markdown記法
{#カスタムID} の処理を制御
markdown-it-attrsが自動でインストールされます。このプラグインは{#カスタムID}とすることでHTMLタグに任意のIDを付与できます。
# タイトル{#custom-id} // 変換前
<h1 id="custom-id">タイトル</h1> // 変換後
3．プラグイン設定
Markdown-it-attrs: Options: カスタムIDプラグインの詳細設定
{
"leftDelimiter": "{", // 開始区切り文字
"rightDelimiter": "}", // 終了区切り文字
"allowedAttributes": ["id","class"] // 許可する属性
}
markdown-it-attrsにオプション設定を指定できます。デフォルトでは{#カスタムID}となっていますが、"leftDelimiter": "「"とすることで「#カスタムID}のように任意の記号を割り当てることができます。
クレジット
VScode拡張機能で表示されるアイコンは、以下の2つの画像を組み合わせたものです。
使用しているプラグイン
謝辞
このプロジェクトの開発にあたり、以下のオープンソースソフトウェアを参考にさせていただきました。この場を借りて感謝の意を表します。
