joppot

コピペで絶対動く。説明を妥協しない

ソフトウェア

AtomのMarkdownでプレビューがトップにスクロールして戻ってしまうのを防ぐ方法

投稿日:2017年2月3日 更新日:

Pocket

topthumb

概要

みなさんこんちにcandleです。今回はAtomのMarkdownで記述中のプレビューがスクロールアップしてしまうのを防ぐ方法です。

Atomには初めからmarkdownのプレビュー機能があるのですが、
markdownの文章が長くなると、編集する度にプレビューがトップに戻ってしまい、
確認するためには毎回スクロールしなくてはなりません。

大変なので、自動的に調整してくれるプラグインを入れます。

前提

Atomがインストールされている

SPONSORED LINK


markdown-scroll-syncをインストールします

markdown-scroll-syncはプレビューを現在編集している場所に合わせてくれるプラグインです。

上のメニューから「Atom」→「Preferences」を選びます。
pref

installのタブを選び、検索フィールドに「markdown-scroll-sync」と入力して、エンターを押します。
searchmarkdown-scroll-sync

トップに表示される「markdown-scroll-sync」のinstallを押します。

installmarkdown-scroll-sync

インストールできました。


markdownのプレビューで使ってみる

適当なmarkdownファイルを開きます。
hello.mdとか

以下の文章を書いてみます。

# マークダウンを自動的にスクロールさせる

Atomでマークダウンを書くのは確かに素晴らしい

なぜなら以下のような素晴らしい機能が備わっているからだ

- マークダウンに合わせた美しいカラーがある
- マークダウンの入力補完がある
  - 例えば、「code」と打ち込んでみてほしいプログラムコードを書く書式が展開されるはずだ
- プレビューがあらかじめ入っている

これほど充実したマークダウンエディタは他に無いだろう

## プレビューを表示する

プレビューを表示させるショートカットはしばしば忘れがちだ。

よく忘れるのでここに書いておこうと思う。

Macの場合はこうだ

```
Ctrl + Shift + m
```


## 問題点

問題があるとしたら、それはプレビューが文字を入力する度にトップに戻ってしまうところだ。

だが安心してほしい、今回入れた「markdown-scroll-sync」を使えば、自動的に現在編集している場所にプレビューを追従させてくれるのだ。

## 結論
マークダウンはAtomで書くと捗る

すると、こんな感じに、プレビューが現在編集しているところに追従してくれます。
autopreview

まとめ

マークダウンはAtomで書くと捗ります。

スポンサードリンク

「為になったなぁ」と思ったら、シェアお願いします。

-ソフトウェア
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

Atomのatom-import-jsプラグインを使ってReact componentを自動的にインポートする

概要 みなさんこんにちはcandleです。 今回はAtomとimport-jsを使って自動的に、componentのパスをインポートしてみたいと思います。 Reactは1ファイル1コンポーネントの書き …

iphoneのsafariでfacebookのmessanger(メッセージ機能)を使う方法

概要 みなさんこんにちはcandledです。 今回はfacebookのmessangerアプリを使わずにsafari上でfacebookのメッセージをする方法を紹介します。 前提 iphoneのsaf …

wordpressでタグをボタンで挿入できる種類を増やす-AddQuicktag

概要 みなさんこんにちはcandleです。wordpressの記事を書いている時、 タグの挿入がもっと楽になれば便利なのにと思いました。私は記事の見出しはh3タグを使用しているのですが、h3タグのボタ …

MAMPでphpのshell_execを使用してunixコマンドを実行できない場合の対処(imagemagick,convert)

概要 みなさんこんにちはcandleです。今回はちょっと問題が起きてshell_execがうまくいかないときのトラブルシューティングをまとめます。 私はMAMPをバージョンアップする前は、phpのsh …

wordpress4.4の画像にsrcsetが埋め込まれるのを削除する

概要 みなさんこんにちはcandleです。今回はwordpress4.4で追加された、retinaやレスポンシブに対応した画像のsrcsetの削除の仕方を紹介します。 wordpressの画像はeww …

プロフィール


ベンチャー企業のCTOをやってます。大学時代にプログラミングを始め、javaから入門し、C++へて、PHPへと進み、会社ではRailsを使用。自動化が大好きなプログラマー

スポンサードリンク

アーカイブ