Zenn
✏️

Typoraを自分好みにカスタマイズする

2020/12/04に公開
CSS
Markdown
Typora
tech

はじめに

2020/11 から始まった、ものづくりをする高校生のための新しい団体、Palettteが主催する Palettte Advent Calendar 2020 の4日目の記事です。

Typoraの特徴

  • クロスプラットフォーム対応のMarkdownエディタ
  • シームレスなライブプレビュー
  • シンプルなUI
  • コピー&ペーストで画像の貼り付けが可能
  • PDF, HTML, LaTex, Word形式でのエクスポートが可能(Pandoc連携)
  • 強力なフォルダ内検索
  • かぎ括弧や引用符、マークダウンシンボルのオートペアリング

テーマの追加方法

テーマ名.cssをthemesフォルダに追加するだけでテーマを使うことができます。
追加するテーマにフォント等が含まれている場合はそれらが入ったフォルダも指定の場所に追加しましょう。
themesフォルダは設定/表示タブのテーマフォルダを開くから開くことができます。

テーマの作り方

テーマ名.cssを作成し、その中にCSSを書いていきます。
※ファイル名は必ず小文字にし、空白の代わりに-を使うようにしましょう。
※デフォルトのフォントサイズを指定してからhtml,h1のような要素のフォントを変更するようにしましょう。
※CSSを変更すると、Typoraの動作が不安定になることがあります。最小限の変更からテストをするようにしましょう。

theme.cssの書き方

すべての要素はmdtype属性を持っており、[mdtype="heading"]のようにmdtypeを指定する方法とCSSセレクタを指定する方法のどちらでもCSSを適用することができます。
CSSセレクタとmdtypeの対応表等は http://theme.typora.io/doc/Write-Custom-Theme/ を参照してください。
また、テーマ全体の色、背景色、フォントを変更するときは既存のCSS変数を利用して設定します。

サンプル

全体とh1の背景色と文字色の変更

:root {
    --bg-color: black; /*背景色*/
    --text-color: white; /*文字色*/
 }

 h1 {
    background-color: gray; /* h1(#)の背景色 */
    color: red; /* h1(#)の文字色 */
}

背景に画像を設定

content {
    background: url(./hoge.png); /* 背景画像の指定 */
    background-color:rgba(255,255,255,0.6);
    background-blend-mode:lighten;
    background-size: cover;
  }

終わりに

Typoraのテーマは非常に簡単に作ることができます。
配布されているテーマだけでも30種類ほどあるので http://theme.typora.io/ で自分好みのテーマを探してみるのも良いかもしれません。

Discussion