VNote2系でMarkdown管理

Release Git Sync Support · vnotex/vnote · GitHub

QTを利用したMarkdownエディタ。
中華圏で人気があるようです。

3系は下記をどうぞ
VNote3系でMarkdown管理 | few light

環境

• Windows10 64bit
• VNote portable 2.10
• wkhtmltopdf 0.12.6

特徴

• Windows/Mac/Linux 対応
• ノートを作成するとmdファイルを作成し、ノートブック-フォルダ-ノートという階層で管理でき、タグも使える
  • フォルダはOS上で作成するので、基本的には無限に作成できる
  • フォルダ構成やタグなどは、構成ファイルの_vnote.jsonに保存される
• Ctrl-tで編集とプレビューを切り替え。編集からプレビュー切り替えのときに保存もする
• タブ対応でファイルを複数開け、他の既定のプログラムでもノートを開ける
• 分割表示やノート間のリンク作成もできる
• シンタックスハイライトに、アウトライン(TOC)やスニペット
• インポートやエクスポート機能に、強力な全文検索
• キーボードショートカットが豊富で、さらにVimモードもあり
  • ユニバーサルエントリのCtrl-gと、ナビゲーションモード(Hit-a-Hint)のCtrl-e Ctrl-wが非常に便利
  • ショートカット一覧が表示されるCtrl-e Shift-/で、忘れてもとりあえずはどうにかなる
• ルートフォルダ以外にも、エクスプローラーから管理外のファイルを開ける
• Gitのプッシュとプルを含む、シンプルな同期に対応

他にも色々と機能があります。

他の機器と同期したいときは、2.10でGit同期に対応したので楽になったと思います。
自分はGitは使わずに、iPhone7ではメモを確認できればいいので、ノートブックのルートフォルダをDropboxで同期して使っています。
Markdownは、画像とか図とか使っていなければプレビューなしでも見やすいので、これでいいかなと。
どうしてもそういうのが見たいなら、PDFに変換などでどうにかなりませんかね。

エキスプローラー表記になっていて気になるが、気にしないことにする。

短所

• デザインが古め
• 編集とプレビューを切り替えたときに、表示場所がイメージしている場所とずれることがある
• 改行コードが変更できない。WindowsはCRLF

編集とプレビュー切り替えのずれですが、特に一番下の場所を編集しているときに、前の項目を表示してしまうことがあります。
これは、Ctrl-jでカーソル位置を変更せずにページダウンスクロールをして、最終行を画面の上の方に表示することでカバーできます。
または、最終行以降に改行しまくることでもカバーできます。スマートではないですが。

自分で作成したファイルの改行コードはLFに固定して使っていたので、少し残念です。

Windowsでの注意点

デフォルト設定のOpenGLは正常に動作しないので、設定で他のOpenGLに変更する必要あり。

全画面モードで他のソフトへ切り替えたりするときに一瞬ちらついたり、メニューを押しても反応しなかったりなど。

VNoteをさらに｢ポータブル｣仕様へ

VNote.exeと同じ場所にvnote.iniファイルを作成してから起動する。

初回起動

ノートブックを追加

ノートブック名: vnotebook

ノートブックのルートフォルダ:
C:/Users/ユーザー名/Documents/vnote_notebooks/vnotebook > K:/Dropbox/vnotebook

ノートブックvnotebookにルートフォルダを作成します
フォルダ名:
new_folder > 00_inbox

以降は、左上の新しいルートフォルダ作成アイコンや、フォルダ右クリック > 新しいルートフォルダからフォルダを増やしていける。

また、ルートフォルダにごみ箱に使われると思われるフォルダと構成ファイルが作成される。

アクティブユーザーカウント

VNote would like to send a request to count active users.Do you allow this request?
A request to https://tamlok.github.io/user_track/vnote.html will be sent if allowed.

VNoteはアクティブなユーザーをカウントするリクエストを送信します。このリクエストを許可しますか？
許可されていれば、https：//tamlok.github.io/user_track/vnote.htmlへのリクエストが送信されます。
No

設定

ファイル > 設定

一般

OpenGL:
システム > OpenGLES
設定した後に、ファイル > 再起動で、VNote再起動すると適用される

読み取り/編集

編集モード

• Swap file (Recommended) off
• Auto save (Buggy) on

エディタのフォントをカスタマイズ on
Microsoft YaHei > HackGen35 Console

Markdown

見出しシーケンス;
無効 1 > 内部ノートのみ有効にしました 2

Code block copy button on

その他

全文検索の一致をページ内で強調表示 on

メインメニュー

編集

タブ位置の幅
4つのスペース > 2つのスペース

タブを強調表示 on

Markdown

イメージの幅を制限する on

コードブロック内のライン番号を表示する on

メイン画面

左下ノート左の表示アイコン
構成ファイル毎の表示 > 修正日時順の表示(逆順)

右下検索 > xで非表示にしてアウトラインの表示幅を広げる
検索(詳細検索)はCtrl-e cかCtrl-Alt-fで開けるので閉じておく。

ノート編集中

上部ツールバー中央 1.2.アイコン 見出しシーケンスアイコン on

見出しに自動で数字番号を割り当ててくれるので、見やすくなる

キーボードショートカット変更

ファイル > ショートカットのカスタマイズ > ショートカットのカスタマイズか、C:\tools\VNote\vnote.iniを開く

C:\tools\VNote\vnote.ini

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

[shortcuts]
FindNext=F3
CaptainMode=Ctrl+E
Find=Ctrl+F
AdvancedFind=Ctrl+Alt+F
CloseNote=
OpenViaDefaultProgram=F12
NewSubfolder=Ctrl+Alt+S
ActivateNextTab=Ctrl+Tab
LastClosedFile=Ctrl+Shift+T
NextMatch=Ctrl+8
SaveNote=Ctrl+S
FlashPage=Ctrl+Alt+L
PreviousMatch=Ctrl+9
FindPrevious=Shift+F3
NewNote=Ctrl+Alt+N
ActivatePreviousTab=Ctrl+Shift+Tab
FullScreen=F11
EditReadNote=Ctrl+T
PastePlainText=Ctrl+Shift+V
UniversalEntry=Ctrl+G
QuickAccess=Ctrl+Alt+I

一部変更

1
2

CloseNote=Ctrl+w
NewNote=Ctrl+n

Vnote > ファイル > 再起動

元に割り当てられているキーを使っていないので、割り当てています。

テーマコピーしてカスタマイズ

漢字が簡体字中国語で表示されるため、好きなフォントに変えます。

テーマコピー

v_pureのテーマを使っているので、C:\tools\VNote\themes\v_pureをコピーして貼り付け > 名前をv_my-pureに変更

C:\tools\VNote\themes\v_my-pureフォルダ内のファイル名を変更。

• v_pure.css
• v_pure.mdhl
• v_pure.palette
• v_pure.qss
• v_pure_codeblock.css
• v_pure_mermaid.css

下記へ

• v_my-pure.css
• v_my-pure.mdhl
• v_my-pure.palette
• v_my-pure.qss
• v_my-pure_codeblock.css
• v_my-pure_mermaid.css

C:\tools\VNote\themes\v_my-pure\v_my-pure.palette 右クリック > プロパティ > 属性 > 読み取り専用をoff

v_my-pure.palette 4~9行目

1
2
3
4
5
6

[metadata]
qss_file=v_pure.qss
mdhl_file=v_pure.mdhl
css_file=v_pure.css
codeblock_css_file=v_pure_codeblock.css
mermaid_css_file=v_pure_mermaid.css

下記へ

1
2
3
4
5
6

[metadata]
qss_file=v_my-pure.qss
mdhl_file=v_my-pure.mdhl
css_file=v_my-pure.css
codeblock_css_file=v_my-pure_codeblock.css
mermaid_css_file=v_my-pure_mermaid.css

Vnote > ファイル > 再起動 > ファイル > テーマ > V_my-pure > okして再起動

Widget(UI)フォント変更

C:\tools\VNote\themes\v_pure\v_my-pure.qss 右クリック > プロパティ > 属性 > 読み取り専用をoff

C:\tools\VNote\themes\v_pure\v_my-pure.qss 1449~1453行目

1
2
3
4
5

QWidget
{
    color: @widget_fg;
    font-family: "Hiragino Sans GB", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", "Dengxian", "等线体", "STXihei", "华文细黑", "Liberation Sans", "Droid Sans", "NSimSun", "新宋体", "SimSun", "宋体", "Helvetica", "sans-serif", "Tahoma", "Arial", "Verdana", "Geneva", "Georgia", "Times New Roman";
}

下記へ

1
2
3
4
5

QWidget
{
    color: @widget_fg;
    font-family: "HackGen35 Console", "monospace";
}

Vnote > ファイル > 再起動

プレビューのフォント変更

C:\tools\VNote\themes\v_my-pure\v_my-pure.css 1~9行目

1
2
3
4
5
6
7
8
9

body {
    margin: 0 auto;
    font-family: "Segoe UI", Helvetica, sans-serif, Tahoma, Arial, Geneva, Georgia, Palatino, "Times New Roman", "Hiragino Sans GB", "冬青黑体", "Microsoft YaHei", "微软雅黑", "Microsoft YaHei UI", "WenQuanYi Micro Hei", "文泉驿雅黑", Dengxian, "等线体", STXihei, "华文细黑", "Liberation Sans", "Droid Sans", NSimSun, "新宋体", SimSun, "宋体";
    color: #222222;
    line-height: 1.5;
    padding: 15px;
    background: #EEEEEE;
    font-size: 16px;
}

一部変更

1

font-family: "HackGen35 Console", Monospace;

94~98行目

1
2
3
4
5

code {
    font-family: Consolas, Monaco, Monospace, Courier;
    color: #8E24AA;
    word-break: break-word;
}

一部変更

1

font-family: "HackGen35 Console", Monospace;

100~113行目

1
2
3
4
5
6
7
8
9
10
11
12
13
14

pre code {
    display: block;
    overflow-x: auto;
    padding: 0.5em;
    color: #222222;
    background-color: #E0E0E0;
    border-left: .5em solid #00897B;
    line-height: 1.5;
    font-family: Consolas, Monaco, Monospace, Courier;
    white-space: pre;
    -moz-tab-size: 4;
    -o-tab-size: 4;
    tab-size: 4;
}

一部変更

1

font-family: "HackGen35 Console", Monospace;

Vnote > ファイル > 再起動

PDFのエクスポート機能を使えるようにする

デフォルトだとHTMLとMarkdownとカスタムしか動かない。

wkhtmltopdfのインストール

Ctrl-e oか、ファイル > エキスポート

ダーゲットフォーマット
Markdown > PDF

詳細設定 > wkhtmltopdfをダウンロード > wkhtmltopdfのダウンロード一覧へ > ダウンロードしてインストール
7zの64bit版を使用したので任意のフォルダへ解凍。

エキスポート表記は見なかったことへ。

wkhtmltopdf パス:
> C:\tools\wkhtmltox\bin\wkhtmltopdf.exe

PDFにエクスポート

情報
ターゲットフォーマットがPDFか確認
出力ディレクトリで出力先を設定

詳細設定
wkhtmltopdfを使用とwkhtmltopdfのパスを念の為確認
タイトルなどを設定

エキスポート

変換に少し時間がかかります。
変換中はVNote使えないので、他のことでもして時間を潰します。

目次を有効にすると最初のページに表示されます。
ページ番号は中心で入れています。

もうひとつのPDF(オールインワン)フォーマットは、複数のMarkdownノートを1つのPDFファイルに変換します。
ノートをフォルダに纏めた後に、エクスポートするノートを纏めたフォルダに変更するといい。

Hexoのテンプレート作成

ブログ用に使います。

C:\tools\VNote\templatesフォルダ内にファイル作成。

• hexo-draft.md
• hexo-post.md

中身は使用しているテーマに合わせて下さい。

hexo-draft.md

1
2
3
4
5

---
title: %no%
---

hexo-post.md

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

---
title: %no%
date: %date%
updated: %date%
categories:
  - anime
  - games
  - reviews
  - windows
tags:
  -
color: blue green red purple
description:
---

VNoteでテンプレート使うには > 左上アイコン新しいノート > ノートを作成 > テンプレート > 下矢印から選ぶ

下書きもVNoteで書いていれば、hexo-draft.mdは使わないと思うのでいらないかも。

自分の場合は、下書きを00_inboxフォルダにとりあえず置いていて、hexo-post.mdのテンプレートで新規作成したノートに、下書きの中身を貼り付けています。
完成したノートは、見出しシーケンスをoffにした後に、ノートを右クリック > Open Note Location > エクスプローラーで切り取りして、Hexoの投稿用のフォルダに貼り付けた後にファイル名の先頭に日付の月日-を追加して、VNoteに項目だけ残っているノートを削除しています。

見出しシーケンスをoffにするのは、h2などの見出しに付いた数字番号を除去しないと使用しているテーマと合わないので。

まとめ

機能も多く、キーボードショートカットも充実しているので、エディタで編集しているときにマウスにいちいち持ち替えるのが嫌だという方にはおすすめです。
マウス使うときも、プレビュー表示のリンククリックと、ノートを他のフォルダに移動するときぐらいしか使わないです。
リンクもキーボードだけでどうにか押せませんかね?

作成されるファイルがmdファイルなので、データベース型などと違って他のエディタでも編集などができる点もいいです。
後は、とにかく検索機能が強い。本当に便利。
mdファイルがかなり増えたときに、検索速度がどうなるかが少しだけ心配なぐらい。

最初に使い始めたときはWordPressの下書きに使っていましたが、その頃はタグ機能なかったんですよね。
タグがないのでメモはBoostnote使っていましたが、なかなか直らない不具合と、ノートを1つしか表示できないので困っていた。
で、いつの間にかタグ機能が実装されていまして、メモとして使えるようになったので、去年からメインに使っています。

エディタのVisual Studio Code(以後vscode)とVSNotesでメモ環境を作ったこともありますが、メモを取るのもメモを表示するのも面倒になってしまって止めました。

Hexoの下書きは、vscode使っているならば、Markdown All in OneとMarkdown Preview Enhancedと、vscode-hexo-utilsを組み合わせて使うと便利で、こちらもおすすめです。
ちなみに、vscode-hexo-utils使用中だとTOCを表示する場所がないんですが、Markdown Preview Enhancedの機能でプレビュー画面にTOC表示できるので、それで一応対応はできます。

個人的には、VNoteの方が編集とプレビューが1画面で幅を取らない点が嬉しいので、しばらくこちらを使うことにします。
まあ結局、Git操作でvscode起動するんですが。

追記

2020-06-22

• 特徴の説明 修正
• ノート編集中の説明 追加
• キーボードショートカット変更の説明 修正

2020-06-24

短所の説明 修正、追加

2020-06-26

• 環境 修正
• 特徴 修正
  • 画像追加
  • 説明修正
• PDFのエクスポート機能を使えるようにする 追加

2020-11-16

• 環境
  • VNote portable 2.10に変更
• 特徴
  • Git同期 追加
• 短所 修正
• キーボードショートカット変更 修正
• PDFのエクスポート機能を使えるようにする
  • wkhtmltopdfのインストール 修正
  • PDFにエクスポート 修正

2021-01-12

• 記事タイトル変更
• まとめ 修正

2022-06-13

• 記事タイトル変更
• リンク変更
• VNote3系の記事リンク 追加
• VNoteをさらに｢ポータブル｣仕様へ
  • リンク削除
• テーマコピーしてカスタマイズ
  • リンク削除
• Hexoのテンプレート作成
  • リンク削除