VScodeの拡張等、自分用のメモ
- [未記載] プレゼン資料作り(Marp for VS Code)
- [未記載] 図表を書く(Draw.io Integration)
導入Extension
- GitHub Theme
- Material Icon Theme
Common
- 日本語フォントを等幅にする。(BIZ UDゴシック):editor.fontFamily
- ファイル保存時に、行末のスペース削除:files.trimTrailingWhitespace
- ダーク系のテーマを選択:workbench.colorTheme
Material Icon Theme
- アイコンを表示:workbench.iconTheme
Setting
"editor.fontFamily": "'BIZ UDゴシック', Consolas, 'Courier New', monospace",
"files.trimTrailingWhitespace": true,
"workbench.colorTheme": "GitHub Dark Default",
"workbench.iconTheme": "material-icon-theme",
導入Extension
- Preview で利用するCSSが変更:markdown-preview-enhanced.previewTheme
カスタムCSSで見出しをカスタム
使い方
- プレビューする
- 目次をつける ※プレビュー出しながら出ないと動かない?
- 目次の作成:
markdown-preview-enhanced.createTOC
<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
が挿入される
- depthFrom、depthToで見出しの深さを調整
- orderdListで章番号を付与。ただし、見出し側にはつかない
- 上書き保存すると、目次が作成される
- 目次除外:見出しの最後に、
{ignore=true}
を付与
- htmlに変換する
- pdfに変換する
- プレビューを無効にする
- 使い方
- 目次をつける ※深さの設定が、ファイルごとにできない。見出しに章番号をつけたい場合はこちら。
- 目次の作成:
markdown.extension.toc.create
- 目次の更新:上書き保存 or
markdown.extension.toc.update
- 目次除外:見出しの最後に
<!-- omit in toc -->
を付与
- 見出しの深さ:
markdown.extension.toc.levels
- 見出しへの章番号の付与/削除:
markdown.extension.toc.addSecNumbers
、markdown.extension.toc.removeSecNumbers
Setting
"markdown-preview-enhanced.previewTheme": "github-light.css",
style.less
.markdown-preview.markdown-preview {
// modify your style here
// eg: background-color: blue;
h1 {
padding-bottom: .1em;
border-bottom: 1px solid #ccc;
}
h1:first-letter {
margin-right: .1em;
font-size: 1.5em;
}
h2 {
position: relative;
padding: .25em 0 .5em .75em;
border-left: 6px solid #3498db;
}
h2::after {
position: absolute;
left: 0;
bottom: 0;
content: '';
width: 100%;
height: 0;
border-bottom: 1px solid #ccc;
}
h3 {
background: linear-gradient(transparent 70%, #a7d6ff 70%);
}
h4 {
border-bottom: solid 3px #cce4ff;
position: relative;
}
h4:after {
position: absolute;
content: " ";
display: block;
border-bottom: solid 3px #5472cd;
bottom: -3px;
width: 20%;
}
h5 {
border-bottom: solid 3px black;
}
}
VScodeでメモを取ろう(VSNotes,Paste Image)
導入Extension
VSnote
- 保存先を設定
[F1] -> [VSNotes:Run setup]
でフォルダを指定、もしくは、"vsnotes.defaultNotePath"を直接記載
- ファイル名を設定
- デフォルトのまま利用
- "vsnotes.defaultNoteTitle": "{dt}_{title}.{ext}"
- {dt}:YYYY-MM-DD_HH-mm、{title}:<作成時に指定した名前>、{ext}:md
- タイトルにスペースが含まれる場合は、"_"に変換
テンプレートを設定
- memo用、mtg用テンプレートを作成
[Code]> [基本設定] > [ユーザースニペット]
で、markdown.json [Markdown]
を選択
- テンプレート名を
vsnote_template_memo
、vsnote_template_mtg
とする。("vsnote_template_"は固定で、以降がテンプレート名になる)
- 作成したテンプレートを "vsnotes.templates" で設定
- memo用をデフォルトのテンプレートに指定
使い方
[F1]キー=>ウィンドウ
で [VSNote : Create a New Note]
を選択
- テンプレートを選択(省略した場合、デフォルトのテンプレートになる)
- ファイル名を入力(省略した場合、New_Noteになる)
Paste Image
- 保存先を設定
- デフォルトは、ファイルと同じディレクトリなので、imgフォルダ配下に変更。"pasteImage.path"
- 一階層下げたので、パスのプレフィックスに"./"を追加。"pasteImage.prefix"
ファイル名を設定
- デフォルトのファイル名は、日時だけなので、対象ファイル名をプレフィックスに追加。"pasteImage.namePrefix"
使い方
- 貼り付けたい画像をコピー
- 張りたい場所に
Ctrl+Alt+V
Setting
"vsnotes.defaultNotePath": "c:\\Users\\XXXXXX\\Documents\\vsnotes",
"vsnotes.noteTitleConvertSpaces": "_",
"vsnotes.defaultNoteTitle": "{dt}_{title}.{ext}",
"vsnotes.tokens": [
{
"type": "datetime",
"token": "{dt}",
"format": "YYYY-MM-DD_HH-mm",
"description": "Insert formatted datetime."
},
{
"type": "title",
"token": "{title}",
"description": "Insert note title from input box.",
"format": "Untitled"
},
{
"type": "extension",
"token": "{ext}",
"description": "Insert file vsnotes.",
"format": "md"
}
],
"vsnotes.templates": [
"memo",
"mtg"
],
"vsnotes.defaultSnippet": {
"langId": "markdown",
"name": "memo"
},
"pasteImage.path": "${currentFileDir}/img",
"pasteImage.prefix": "./",
"pasteImage.namePrefix": "${currentFileNameWithoutExt}_"
"vsnote_template_memo": {
"prefix": "vsnote_template_memo",
"body": [
"---",
"title: $TM_FILENAME_BASE",
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"tags:",
"\t- memo$1",
"---",
"",
"# $2",
"",
"$3",
],
"description": "Memo Template",
},
"vsnote_template_mtg": {
"prefix": "vsnote_template_mtg",
"body": [
"---",
"title: $TM_FILENAME_BASE",
"date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
"tags:",
"\t- mtg$1",
"---",
"",
"# $TM_FILENAME_BASE",
"",
"* date&time: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $2 - $3 @ $4",
"* Attendees: $5",
"",
"## Agenda",
"",
"* $6",
"",
"## Notes",
"",
],
"description": "MTG Template",
}
TODO管理に使おう(todotxt-mode)
導入Extension
todotxt-mode
- タスク登録用のスニペットを作る
[Code]> [基本設定] > [ユーザースニペット]
で、plaintext [Plain Text]
を選択
- todo.txtとは
- プレーンテキスト1ファイルでタスク管理するために整備されたフォーマット
- x (A) YYYY-MM-DD task +project @context due:YYYY-MM-DD
- 使い方
- todo.txtファイルを作成し、vscodeで開く
- todoを登録
- "task" でスニペット登録しているので、
task
と打てば、保管される
- タスクが完了したら、完了日を入れて、完了フラグを立てる
- 優先度を変える
- 優先度を上げる:
ctrl+shift+a
- 優先度を下げる:
ctrl+shift+z
- タスクをソート
- 期日でソート:
todotxt-mode.sortByDueDate
- プロジェクトでソート:
todotxt-mode.sortByProject
- 優先度でソート:
todotxt-mode.sortByPriority
- 完了タスクをDoneファイルに移動
- done.txt に移動:
todotxt-mode.archiveTasks
- todo.txt に戻す:
todotxt-mode.moveTasksToTodo
- 補足情報をつける
- todo.txt に補足情報をMarkdonwで記載する。
- 補足情報部分を選択し、
todotxt-mode.createTaskNote
を実行し、補足情報を記載したMarkdonwファイルを作成
- 補足情報をつけたいタスクに、貼り付ける
Setting
"task": {
"prefix": "task",
"body": [
"(${1:A}) ${2:task} due:${CURRENT_YEAR}-${CURRENT_MONTH}-${3:$CURRENT_DATE}"
]
}