メニューを閉じる

テクノモバイルグループ

メニューを開く

2017.10.19

導入編

シンプルかつ便利なMarkdownエディタ「Typora」

Typora
https://typora.io/

こんにちは。新卒のkuroです。
今回ご紹介するのは「Typora」というMarkdownエディタ。
Windows/Mac/Linuxのすべてに対応しており、
現在はβ版につき、フリーで使用できます。

サポートしているのは「GitHub Flavored Markdown」なので
Gitなどを使用している方なら同じ要領で記述ができると思います。

このエディタの特徴は、
「Atom」等の一般的なマークダウンエディタでは
入力画面/プレビュー画面で2ペイン表示になっていることがほとんどですが、
この「Typora」では1画面に統合されており、
入力したらリアルタイムでマークダウンとしてプレビューされるようになっています。
余分なスペースを取らなくなるので作業効率が上がります。
元のMarkdownコードが見たくなったら、
「Ctrl + /」でソースコードモードに変更できます。

typora_gif1

 

テーブルもマウス操作で簡単に作成することができます。

typora_gif2

 

他にもアウトラインの表示や、
入力したMarkdownのHTMLやPDF出力などにも対応しています。

フォントなどが変更したくなった場合は、
カスタムCSSを適用することで変更が可能です。
公式ドキュメントを参考に、

[File] > [Preference] > [Advanced Settings] > [Open Theme Folder]

配下に、独自で作成したCSSを設置することで反映が行われます。

Custom font
http://support.typora.io/Custom-Font/

Add Custom CSS
http://support.typora.io/Add-Custom-CSS/

 

更にこの「Typora」はMarkdownでのダイアグラム記法にも対応しており。

[File] > [Preference] > [Markdown] > [Syntax Support] > [Diagrams]

を有効にすることでダイアグラム表示が可能です。
以下コードのように記述することで作成していきます。

サポートしているライブラリは以下の3つ。

JS Sequence Diagrams
https://bramp.github.io/js-sequence-diagrams/

flowchart.js
http://flowchart.js.org/

mermaid
https://mermaidjs.github.io/

今回はその中でも簡単に記述できる「JS Sequence Diagrams」「flowchart.js」
について以下にサンプルを記載します。

シーケンス図

「JS Sequence Diagrams」を使用してシーケンス図を記述できます。
コードブロックにsequenceと記述します。

sequence

フローチャート

「flowchart.js」を使用してフローチャートを記述できます。
コードブロックにflowと記述します。

flow

その他にも様々な便利な機能がありますので、
興味のある人は「Typora」の公式サポートページを見てみるのも良いと思います。

Typora Support – Typora Support
http://support.typora.io/

 

皆さんもぜひこの「Typora」を使ってMarkdownで
メモやドキュメントを書いてみてください。

Typora
https://typora.io/

 


【テクノモバイルではエンジニア/デザイナーを積極採用中です!】

下記項目に1つでも当てはまる方は是非、詳細ページへ!
  • 自分でアプリを作ってみたい
  • ITで世の中にワクワクを生み出したい
  • 使いやすさ、デザインにこだわったWebサイトを開発したい

採用情報の詳細はこちら


Qangaroo(カンガルー)

  • 徹底した見やすさと優れた操作性で、テストの「見える化」を実現。
  • テストの進捗が見える。開発がスマートに進む。
  • クラウド型テスト管理ツール『Qangaroo(カンガルー)』
https://qangaroo.jp/

最近の記事

SNS共有

X CLOSE
X CLOSE
X CLOSE