nyarn.tech

にゃーん

vscode + memoでメモ環境を整えた

ずっとkobitoをメモに使っていました。

ただ最近なんだかエラーで落ちたり、
エディタの書き心地がしっくりこなかったり、
もっとシンプルに管理したいなという気持ちが高まったので最高のメモ環境探しの旅にでました。

メモアプリに求めるもの

  • ローカルで完結する
  • Markdownでかける
  • カスタマイズしやすい
  • 同期がとりやすい
  • 正直vscodeでいい(ディレクトリだけ決めておく)

↑から順に欲しい機能です。

そこで出会ったのがmattnさんの作ったmemoです。

github.com

memoの存在は知っていたのですが、mattnさんなのでvim専用・・・と思いきや、なんと他のエディタも使えるようでした!

もしかしてこれは最強じゃね、と思って早速memoを導入しました。

memoの気に入っているところ

めっちゃあります。

  • ターミナルから起動できる
  • 検索性にすぐれている
  • 整形して見るときにcss/jsあてれる
  • 中身はシンプルな.mdファイル ...

実際にわたしがどんな感じにmemoを使っているかを紹介すれば、きっとこの魅力が伝わると思います。

プレビューまわり

ということでmemo環境を晒します。
自分は ~/.config/memo/asayamakk というディレクトリを切って、そこにテンプレートやらスクリプトをどかどか投げ込んでいます。
どうせそんなに膨らまないし、頭を使わなくていいので楽です。

Markdownのプレビューには highlight.js を使ってます。 templateBodyとindex.jsはこんな感じ

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>{{.Name}}</title>
  <link href="/assets/index.css" media="all" rel="stylesheet" type="text/css" />
  <link href="/assets/highlight/styles/atom-one-dark.css" rel="stylesheet" type="text/css" />
  <script src="/assets/highlight/highlight.pack.js"></script>
  <script src="/assets/index.js" defer></script>
</head>
<body>
  {{.Body}}
</body>
</html>
hljs.configure({
  tabReplace: '  '
})
document.querySelectorAll('div pre').forEach(elem => {
  hljs.highlightBlock(elem)
})

プレビューはこんな感じになります。

f:id:asayamakk:20170930014409p:plain

(左がhighlight.js適用したとき)

その気になればフロントエンドで実現できることは大体やれます。

メモ取りまわり

エディタはvscodeです。
リアルタイムプレビューはあまり使わないので、Markdownを書くときはそのままのvscodeを使っています。

一応プラグインなしでもでも2ペイン+プレビュー機能を使ってリアルタイムプレビューできます。

メモのバックアップ+同期はGitHubで行っています。

こんな感じのかなり雑なシェルスクリプトでcommitするようにして、
ローカルで5分に1回cronを回しています。

#!/bin/bash
cd ~/.config/memo/
git pull origin master && git add . && git commit -m "auto commit # $(date '+%Y-%m-%d(%a) %H:%M')"
git push origin master

こけたら気づくし、そもそも2台以上で同時に編集することはないので今のところとても快適です。

芝が荒れるのが気になる場合は git config -- local user.email <サブアドレスなど>
でcommitに残るメールアドレスを変更しておけば問題ありません。

シンプルなMarkdownファイルだからこその雑さですね。

おわりに

脱kobitoして、memoに移行したら快適すぎて
副次的にブログも捗るようになりました。