ユーザ用ツール

サイト用ツール


tipsmemo:tips:vscode

Visual Studio Code

デフォルトの改行コードを変更する

ユーザー設定/ワークスペース設定でfiles.eol項目を変更

再読み込み(リロード)の方法

  • Ctrl + Shift + P でコマンドパレットを表示1)
  • reloadと入力
  • Developer: ウィンドウの再読み込みを選択

Draw.io integration のテーマ変更

Darkmodeだと使いにくいので、VSCode右下のTheme: dark表示をクリックすると、他のカラーテーマを設定できる

MarkdownPreviewEnhanced

PuppeteerのPDF出力で用紙設定を行う

Markdownドキュメントの先頭に、以下のようなコードを記載する
なお、A判のフォーマットは「a4」の様に頭が小文字なので注意2)3)

---
puppeteer:
  format: "a4"              # 用紙フォーマット指定 a0 ~ a6, letter, legal...
  landscape: false          # 用紙方向
  # printBackground: false  # 背景画像
  # margin:                 # マージン
  #   top: 10mm
  #   bottom: 10mm
  #   left: 10mm
  #   right: 10mm
---

「ctrl+shift+p」でcssを呼び出して設定も可能

  // modify your style here
  // eg: background-color: blue;
  font-size: 20px;      // change font size
  line-height: 2.2;     // change line height
  pre {
    position: relative;
    background-color: #ffffff; /* コードブロックの背景色 */
    border: 1px solid #ddd;
    /* 右下方向に 8px ずつずらしたグレーのボックスを作成 */
    box-shadow: 8px 8px 0px 0px #f0f0f0;
    margin-bottom: 20px; /* 下の要素との隙間 */
  }
  code {
    font-family: 'Fira Code', monospace;  // change code font family
    font-size: 18px;    // change code font size

  }
  :not(pre) > code {
      background-color: #f2f2f2 !important; /* インラインの背景色 */
      // color: #d63384 !important;           /* 文字色(お好みで) */
      padding: 2px 5px !important;
      margin: 0 3px !important;
      border: 1px solid #ccc !important;
      border-radius: 3px;
      /* インライン用の小さな「後ろのボックス」 */
      box-shadow: 2px 2px 0px 0px #dddddd !important;
      font-family: var(--vscode-editor-font-family, "Consolas", monospace);
  }

参考

1)
バージョンによっては Ctrl + P
2)
web上の記載は本家も含めて殆どが間違っています
3)
大概のソフトはprinterに合わせてくれるようでエラーにならないので、気付いていない人が多いようです
tipsmemo/tips/vscode.txt · 最終更新: by hayashi