Typoraを設定してMarkdownの編集とPDFへのエクスポートを行う方法

:warning: 2022年7月以降、完全なベータ版は動作しなくなりました。

Windows: トリアル版をインストールし、ドキュメントを開かない状態で、必要なだけ空のウィンドウを作成してください。最初のファイルを開くと、新しいドキュメントを開くことができなくなります。そのため、起動直後に Ctrl+Shift+N で空のウィンドウを作成し、その後「ライセンス情報」ウィンドウを閉じてください。このウィンドウは再利用できないため、最初に複数の空のウィンドウを一度に作成するのが最善です。

Linux: Ctrl+o で新しいウィンドウを作成し、その中にドキュメントを開く機能は正常に動作します :sunglasses: 。事前に空のウィンドウを大量に用意する必要はありません。

はじめに

:bulb: Typora - 最高のエディタ:

  • Markdownソースコードの編集に最適
  • PDFへのエクスポート(以下設定参照)

利用可能なメリット:

  • 画像(オフライン保存可能)、構文ハイライト付きコード、表を挿入してラフなメモとして使用可能
  • フォーマット調整に最小限の手間
  • ドキュメント内でのコンテンツ挿入と相互参照リンクが便利
  • ドキュメントをウェブページのように扱える(挿入した画像を編集するとドキュメント内に反映)
  • 1つの画像を複数のドキュメントから参照可能
  • Typora、Gitlab、GitHub、YouTrack、ProxmoxのNotes記述で互換性があり、形式が汎用的で逆互換性も保証
  • Gitlab、GitHubのマークダウン記法(readme.mdで自動開く)ほぼ完全互換
  • オンラインドキュメントプラットフォーム(例:Docsify)との最大互換性

インストール

https://typora.io から手動でダウンロード、またはChocolatey経由でインストール:

choco install typora --ignore-checksums --execution-timeout=300 --limit-output --no-progress --yes

Vue.jsテーマ

このテーマはDocsifyと非常に相性が良いです。ドキュメントの見た目、Docsifyでの表示、およびPDF出力の見た目が完全に一致します!

~/.config/Typora/themes/

このフォルダに以下のファイルを配置してください:

vue (フォルダ)
vue.css
vue_dark.css

テーマの全アーカイブはこちら:
typora_themes.zip (3.1 MB)

インデントの設定

インデントはコンテンツのレイアウトに影響します。一度設定したインデントサイズは変更しないでください。ページの区切りを崩す原因になります。

ドキュメント作成に適した値は: 上部10、下部5、左側10、右側5 です。このレイアウトでは、すべてのプリンタがページ番号を印刷できない可能性があります。

ページ区切り挿入(PDF)

ページ区切りを強制的に挿入するには、ヘッダーの前に次のコードを挿入してください。

これにより、印刷用に最適化されたPDFを生成でき、文章が論理的にページに分割されます(表は自動的に分割されます)。

<div style="page-break-after: always;">
</div>

:person_tipping_手: 以前の設定と上書きでドキュメントを定期的にエクスポートし、ページ分割が適切なPDFを得るためには:

画像には、対応するショートカットキーを持つ2つのエクスポートオプションが表示されています。(AIによるキャプション)

必要に応じて、上記で指定したセパレータを使ってページの区切りを調整してください。

画像挿入の設定

「画像をユーザーのフォルダにコピーする」オプションを有効にしてください:

画像をユーザーのフォルダにコピー = ./images/${filename}

これにより、画像がローカルの関連フォルダにコピーされます。一時フォルダから永続フォルダへ画像を移動するには、画像の右クリックコンテキストメニューから「コピー先 \u003cフォルダ\u003e…」を選択してください。ここで「フォルダ」はドキュメント名と一致するフォルダ名(最初の保存時に自動作成)です。

スペースと特殊文字に注意してください!

Typora はこのようなパスで画像を正しく表示しますが、GitLab などでは表示されません。その場合は、Urlencoder を使って特殊文字を置換してください:

     -    %20
!    -    %21
@    -    %40
#    -    %23
$    -    %24
%    -    %25
^    -    %5E
\u0026    -    %26
*    -    %2A
(    -    %28
)    -    %29
\u003c    -    %3C
\u003e    -    %3E

拡張フォーマットのサポート

拡張フォーマットのサポートを有効にしてください:

コードブロックの行番号

最新のバージョンでは、設定に「すべてのコードブロックに行番号を付ける」チェックボックスが追加されました。

特定のケースでのみ行番号が必要な場合は、次の構文を使用してハイライト設定を指定してください:

{.language-name .numberLines}

または

# 特定の行番号から開始する場合
{.language-name .numberLines startFrom="start-value"}

ヘッダー間のページ区切りを削除

Typora 0.11.7 以降では、「 上部ヘッダー間のページ区切り」の設定が追加されました。この設定は常に無効にしてください

ページ番号(フッター)の表示を推奨します:

${pageNo} / ${totalPages}

\"0.11.7以前のバージョンの場合\"

旧バージョンでは:
Typora の PDFエクスポート時にヘッダー間でページ区切り(page-break)が自動追加され、PDFのページが破壊されることがあります。これを修正するには:

\u003ckbd\u003eメニュー\u003c/kbd\u003e–\u003ckbd\u003eファイル\u003c/kbd\u003e–\u003ckbd\u003e設定\u003c/kbd\u003e–\u003ckbd\u003eフォーマット\u003c/kbd\u003e–\u003ckbd\u003eテーマのフォルダを開く\u003c/kbd\u003e

C:\\Users\\xx\\AppData\\Roaming\\Typora\\themes

github.css ファイルを開き、@media_print ブロックをコメントアウトしてください。CSSのコメント記号 /**/ を追加してください:

/*@media print {
    html {
        font-size: 13px;
    }
    table,
    pre {
        page-break-inside: avoid;
    }
    pre {
        word-wrap: break-word;
    }
}*/

Typora を再起動してください。

表のページにまたがる挙動の変更

PDFエクスポート時に表が常に新しいページから始まる場合があります。この挙動を変更するには、テーマファイル C:\\Users\\...\\AppData\\Roaming\\Typora\\themes\\github.css を開き、「avoid」を「auto」に変更してください:

\u003ckbd\u003eメニュー\u003c/kbd\u003e–\u003ckbd\u003eファイル\u003c/kbd\u003e–\u003ckbd\u003e設定\u003c/kbd\u003e–\u003ckbd\u003eフォーマット\u003c/kbd\u003e–\u003ckbd\u003eテーマのフォルダを開く\u003c/kbd\u003e

    pre {
        page-break-inside: auto;
}

### ドキュメント

部分的に翻訳されたドキュメント: https://way23.ru/typora-%D1%80%D0%B0%D0%B7%D1%80%D1%8B%D0%B2%D1%8B-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86/

### エモジの挿入

https://github.com/ikatyang/emoji-cheat-sheet

### マークダウンのラッピング

[Markdown-Reference.pdf|attachment](upload://bJJtcLkXrjMiDU9xA38FqzPSZJd.pdf) (334.3 KB)

### 図表

https://support.typora.io/Draw-Diagrams-With-Markdown

https://mermaid.js.org/syntax/gantt.html

[typora_diagrams.md|attachment](upload://t9Q87PYdpkvGHOIrRP5wvRWvtWe.md) (12.8 KB)

```mermaid
stateDiagram-v2
    State1: The state with a note
    note right of State1
        Important information! You can write
        notes.
    end note
    State1 -- State2
    note left of State2 : This is the note to the left.
%%{init: { 
  "theme": "base", 
  "themeVariables": { 
    "pie1": "#8BC34A", "pie2": "#f3d69c", "pie3": "#FF5722",
    "pie4": "#009688", "pie5": "#5C6BC0", "pie6": "#03A9F4",
    "pie7": "#EF4444", "pie8": "#ec070c", "pie9": "#FFC107",
    "pie10": "#ca936d","pie11": "#c9edfa","pie12": "#E91E63"
  } 
} }%%
pie title
    "CI/CD, SETUP, RND (HA/LB)" : 37.3
    "Other (DB, BACKUP, etc.)" : 15.94
    "CONSULT + サポート" : 13.3
    "PM, process" : 10.45
    "PERIODIC / SETUP (VM)" : 7.4
    "DOCS" : 5.31
    "PRESALE" : 4.6
    "MONITORING" : 3.85
    "ONBOARD / PREPARE" : 1.82
    "手動 / FIX" : 0.18
    "RND (アーキテクチャ)" : 0.05

ボタン

画像の赤いボタンに白い文字で「確認が必要です」と表示されています。(AIによる画像のキャプション)

ドキュメントの先頭に README.md に以下のようなコードを追加してください:

<style>
.markdown-section .mybutton, .markdown-section .mybutton:hover {
  cursor: pointer;
  color: #CC0000;
  height: auto;
  display: inline-block;
  border: 2px solid #CC0000;
  border-radius: 4rem;
  margin: 2px 0px 2px 0px;
  padding: 8px 18px 8px 18px;
  line-height: 1.2rem;
  background-color: white;
  font-family: -apple-system, "Segoe UI", "Helvetica Neue", sans-serif;
  font-weight: bold;
  text-decoration: none;
}
</style>

ボタンを挿入するには、クラス指定のコードを使用してください:

[確認が必要です](URL ':class=mybutton')

PDFではボタンは通常のリンクとして表示されます