Skip to content

Instantly share code, notes, and snippets.

@amaya382

amaya382/c87.md

Last active February 7, 2024 16:10
Show Gist options
  • Save amaya382/435533a86d00f84884ce to your computer and use it in GitHub Desktop.
Save amaya382/435533a86d00f84884ce to your computer and use it in GitHub Desktop.
Download ZIP
SublimeTextで作るお手軽Markdown文章作成環境
Raw
c87.md

これはC87で頒布した部誌「OhUCC!」に寄稿した記事に若干の追記をしたものです.

SublimeTextで作るお手軽Markdown文章作成環境

0. Markdownって？

Markdownとはいわゆるマークアップ言語です. Markdownの簡単な規則に則るだけで整ったHTMLが作成できます. また, 現在ではHTMLだけではなく, LaTeXやPDFなどにも変換するアプリが提供されているため大変汎用的です. ちなみにこの文章もすべてMarkdownで書いています.

1. 最終目標

  • リッチで美しく
    まさかメモ帳等で文章作成している人はいませんよね?????
    実はこれ, SublimeTextを入れるだけです() カラーテーマは好みで変えられます.
    vim?emacs?ｷｺｴﾅｲﾅｰ
プレビューには編集している位置にマーカーが出ます

  • 書きながらのリアルタイムプレビュー
    マークアップ言語なので変換後のレイアウトはすぐ見たいですよね?
    TeXを弄っている人であれば, 変換の煩わしさが分かるはず…
    今回は書きながら結果を見られるようにします.

  • プログラムのシンタックスハイライト
    プログラムを文章に埋め込みたいこともあると思います. 今回は自動的にプログラムの部分にシンタックスハイライトを行うようにします. 主要な言語であれば, キーワードごとの色分けも自動的に行われます.

SELECT t1.sei, t2.quantity 
FROM customer AS t1, goods AS t2
WHERE t1.id_c = t2.id_c;
override def takeRight(n: Int): List[A] = {
    @tailrec
    def loop(lead: List[A], lag: List[A]): List[A] = lead match {
      case Nil => lag
      case _ :: tail => loop(tail, lag.tail)
    }
    loop(drop(n), this)
}

  • TeX準拠の数式作成・挿入
    キレイな数式使いたいですよね?
    今回はTeX記法で複雑な数式でもキレイにレンダリングしてくれるようにします.
    $$ \begin{eqnarray*} \mathrm{e}^{\pi i} &=& -1 \tag{0}\ (T^{wav})f(a,b) :&=& \int dx|a|^{1/2}f(x)\overline{\psi(\frac{x-b}{a})} \tag{1} \end{eqnarray*} $$

  • 図(UML系)の作成・挿入 (Mac/Linux only)
    フローチャートやUMLなどを文章中に入れたい場合もあるはずです. 特にレポートとか…
    今回はplantumlというものを使って テキスト で 図 を作成し, そのまま文章に埋め込むところまでできるようにします. すべての元データがテキストで完結することで, gitなどによるバージョン管理も楽に行えるはずです.
複雑なシーケンスもテキストベースで記述できます

2. インストール

2.1. 必要なプログラム類のインストール

何はともあれ基幹プログラムのインストール. 以下のリンクからOSに合ったものをインストールしてください. 分かる方は, WindowsであればChocolately, Macであればbrewのようなパッケージマネージャを使ってインストールしても大丈夫です.

2.2. SublimeTextのセットアップ

SublimeTextはそのままでも十分便利です. が, もっと便利にするために少しセットアップを行います.

  1. PackageControlのインストール
    PackageControlとは楽にSublimeTextを拡張するための必須アイテムです.
    メニューバーから View > ShowConsole としてコンソールを開き, 以下のリンクからコードをコピペし, エンターを押して実行しましょう. 完了したら一旦SublimeTextを再起動してください. (https://sublime.wbond.net/installation)

  2. プラグインのインストール
    先ほど入れた PackageControl を使ってプラグインを入れていきます. (win)Ctrl+Shift+P (Mac)Cmd+Shift+P でコマンドパレットを開き, PackageControl: install Package を選択してエンターを押し, 出てくる候補をエンターで選択するとインストールできます.
    選択する際は一部の文字を入力することで候補を絞り込むことができます.

  • Markdown Extended
    Markdownをわかりやすくするためにシンタックスハイライトされるようにする.

  • ConvertToUTF8
    SublimeTextは基本的にUTF-8というエンコーディングを前提で動作します. Windowsで使われるShiftJISなどを扱えるようにするプラグイン.

  • IMESupport (Win only)
    Windowsを使っていると日本語入力がうまくいかない場合があるので, それを回避するためのプラグイン.

ここから先のプラグインも本来は同じようにインストールできるのですが, 日本語環境だと無視できないバグ等があるので, 独自に拡張したプラグインを手動で入れることにします. 以下のリンクからダウンロード→解凍してください. 分かる方は git clone しても構いません.

Preferences > BrowsPackages を選択し, 解凍したフォルダをそこに移動させます.

  1. パスを通す (Mac/Linux only)
    以下を参考にして subl にパスを通してください.
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl

3. 試してみよう

適当なファイル(*.md)を作成してください. コマンドパレットを開き, Markmon launch を選択すると, デフォルトブラウザでプレビューURLが開かれるはずです. (もし出てこなかったら, Set Syntax: Markdown Extended を選択してからだと出てくるかもしれません) この状態でファイルを編集するとブラウザ上にリアルタイムプレビューが出てきます！！

追記

Windowsの場合はパスが通っているかの確認, sublimetext-markmonの設定でexecutable(markmonを呼び出すコマンド)の調整をしてください.

4. 特殊な記法について

4.1. 数式

数式は基本的にTeX記法に準拠しています. 埋め込む場合は文章中に,

文章文章文章文章文章文章文章文章
$$
ここにTeX記法で書く
$$
文章 $ここにTeX記法で書く$ 文章文章文章

のようにして書きます. $で囲むことでインライン数式, $$で囲むことでディスプレイ数式を使うことができます.

4.2. ダイアグラム

ダイアグラムの作成には独自の記法を使うので簡単に解説します. 文章中に,

@startuml xxx.png
ここにplantumlに従って書く
@enduml
![](xxx.png)

のようなブロックを書くことでダイアグラムとして認識させます. xxx には任意の名前を入れてください. この状態で Diagram: Generate Diagrams for Active View をコマンドパレットから選択することでダイアグラムの画像化が行われます. 成功すれば ![](xxx.png) の部分に作成されたダイアグラムの画像が埋め込まれます. 簡単！
ただし, このままだと @startuml 〜 @enduml の部分もテキストとして現れてしまうので, その部分をコメントアウト(Cmd+/ or Ctrl+/)しておくといいと思います.

<!-- @startuml xxx.png

ここにplantumlに従って書く

@enduml -->
![](xxx.png)

注意点が2つ. 一つ目は, Markmon launch を実行した時にアクティブになっていたファイルにしかこれが行えないという点です. もし別のファイルでダイアグラムを作る必要ができたら, そのファイルをアクティブにしながら Markmon exit > Markmon launch と再起動してください. 二つ目は, plantuml記法に従っていると --> という部分が出てくることがあります. これがコメントの終端と認識されてしまうことがあるので, -r-> のようにarrowの方向を明示的に指定する記法を使うことでこれを回避できます.

4.3 ここで使っているMarkdownについて

Markdownにはいろいろな方言があります. 今回利用しているものは pandoc というプログラムの扱う拡張Markdownというものです. 表組みなどもできます. また, HTML要素の埋め込みもできるので, 臨機応変に使っていきましょう.

5. おまけ/まとめ?

Markdownやplantumlの記法についてはググってください, いい記事が沢山出てくると思います. これでらく〜にレポートや記事を書くことができるはずです.

  • SublimeTextにはまだ沢山の便利な設定やプラグインがあります. 探してみてください.
    Table Editor, AutoFileName, Emmet, SideBarEnhancements, BracketHighlighter etc…
  • SublimeTextはMarkdownだけでなく万能エディターとして使えます.
  • 2.2.3パスを通す をしている場合, ターミナルからも subl <args> で使うことができます
  • 内部的に使っているpandocを明示的に使うことで, 作成した文章をLaTeX形式やWord形式にすることもできます.
  • PDFにしたい場合は, ブラウザを 右クリック > 印刷 とPDFに印刷できます. ちなみにブラウザをリロードすることで, 一時的に赤い指示線を消すことができます.
  • あれ?更新されない?うまくいかない…という場合は [ブラウザの更新, Markmonの再起動, SublimeTextの再起動, パソコンの再起動, インストールしたプログラムの確認] あたりを試すと幸せになれるかもしれません.

それでは皆さん, Markdown with SublimeTextライフを楽しんでください！

`C87`
`written by amaya(@0x17E)`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment