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

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

関連記事

Mac OS MavericksにX11(Xquartz)をインストールする

概要 みなさんこんにちはcandleです。今回はX11のインストールを行います。MavericksからかMountain Lionからか忘れましたが、MacではX11が標準でインストールされなくなりま …

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

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

Emacsでreact+es6に対応したflycheck + eslintの環境を構築する

概要 みなさんこんにちはcandleです。 今回は以外に難しい、emacs + eslintの導入をしてみましょう。 emacsは他にもjsHintやjsxHintなどjavascriptの記法をチェ …

Emacsとimport-js2.2.0を使ってReact componentを自動的にインポートする

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

emacsのReactの開発をrjsx-modeで行う

English 日本語 概要 みなさんこんにちはcandleです。 今回はemacsのreact開発用のメージャーモードのrjsx-modeを導入してみたいと思います。 Reactの開発はこれまで、w …

プロフィール


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

スポンサードリンク

アーカイブ