クロクロ・ショップ

Visual Studio Codeの拡張機能を作ってMarkdown表示を改造する本

 『Visual Studio Code』の拡張機能を開発して公開する本です。

 標準Markdown表示に処理を追加して、コード ブロックのアスキーアートをSVG化したり、HTMLファイルを保存したりします。

詳細情報

 『Visual Studio Code』の拡張機能を開発して公開する本です。

 標準Markdown表示に処理を追加して、コード ブロックのアスキーアートをSVG化したり、HTMLファイルを保存したりします。

 本書では、以下のような機能を実現します。

  • 標準Markdown表示に処理を加えて、コード ブロックのアスキーアートをSVG化する。
    • 適用するコード ブロックの種類を自由に設定可能。
    • アスキーアート化する際の挙動を、設定のJSONで自由に指定可能。
  • コマンド入力で、標準Markdown表示の内容をHTMLファイルに保存する。
    • HTMLのテンプレートを自由に適用する。
    • 実行フォルダごとにテンプレートを用意可能。
  • 標準Markdown表示の末尾に、追加の表示をおこなう。
    • HTMLをコピー可能なテキストエリアを追加する。

 アスキーアートのSVGへの変換は、拙作『Ascii Figure To Svg』を利用しています。

 開発して公開した拡張機能は『Ascii Figure To Svg for VS Code』です。

目次


前書き
第1章 前提知識と開発の流れ
  1-1 前提知識
  1-2 大まかな流れ
  1-3 ドキュメントの確認
第2章 開発の準備
  2-1 『Node.js』のインストール
  2-2 必要なモジュールのインストール
  2-3 拡張機能の雛形の作成
  2-4 テスト実行
第3章 package.json
  3-1 activationEvents / main / contributes(コマンド)
  3-2 contributes(設定)
第4章 extension.js 1: activate関数
  4-1 モジュールの読み込み
  4-2 activate / registerCommand / extendMarkdownIt
  4-3 コマンドの処理を実装
  4-4 markdown-itの拡張
第5章 extension.js 2: Config、EditorInfクラス
  5-1 Configクラス
  5-2 EditorInfクラス
第6章 extension.js 3: その他のクラス
  6-1 Outputクラス
  6-2 Templateクラス
  6-3 Utilクラス
第7章 マーケットプレイスへの公開
  7-1 アイコンの準備
  7-2 ドキュメントの作成
  7-3 「Azure DevOps」の「Personal Access Token」の取得
  7-4 「Visual StudioMarketplace」にパブリッシャーを作成
  7-5 拡張機能を公開
後書き

プレビュー

 本のページのサンプルです。


QR コード

情報

著作権者 : 柳井 政和

Web Site : http://crocro.com/

This Page : https://crocro.com/shop/item/vscode_extension.html

埋め込み :

Twitter : ruten