Vimの使い方メモ

TL;DR

The tips of vim, my favorite editor.

改行の置換

vimの中で改行への置換を行うには\r、改行を置換するには\nを用いる必要がある。

複数行の一括操作

インデント

  • 「ctrl」+「v」でビジュアルモードにして、複数行を選択
  • 「>」でインデントする

インデント削除はビジュアルモードで複数行が選択された状態で「<」で。

コメントアウトを一括挿入

  • 「ctrl」+「v」でビジュアルモードにして、複数行を選択
  • 「shift」+「i」で挿入モードにする
  • 「#」文字を挿入(この時、1行目だけ挿入されているように見えるが、問題ない)
  • 「esc」キーを2回押す(こうすると、最初に選択された複数行がすべてコメントアウトされる)

コメントアウトを一括削除

  • 「ctrl」+「v」でビジュアルモードにして、複数行を選択
  • カーソルをコメントアウト文字にいる状態で、「d」で一括削除できる

ステータスライン

  • %F – ファイルのフルパス。
  • %m – 編集されているなら [+]。リードオンリーなら [-]。
  • %h – Help buffer なら [HELP] と表示。
  • %w – Preview window なら [PREVIEW] と表示。
  • %< – ウィンドウの横幅が縮まってもここまでは表示することを保証。
  • %{&fenc!=''?&fecn:&enc} – fileencoding が設定されていればその値、設定されていなければ encoding を表示。
  • %{&ff} – fileformat の値を表示。%{&fileformat} の省略形。(dos, unix, mac)
  • %Y – filetype の値を表示。通常はこれに対応する syntax file が読み込まれているはず。
  • %02B – カーソル位置の文字コードを16進数で表示。
  • %l – カーソル位置の行番号。
  • %L – ファイルの行数。
  • %02v – カーソル位置の桁番号。
  • %c – カーソル位置の列番号
  • %p – テキスト全体に対するカーソル位置までの割合(パーセント表示)
  • %% – 文字「%」を表示

タブ操作

複数のファイルをタブで同時に開く

$ vim -p file1 file2 file3

これで、3つのファイルをvim内でそれぞれタブで開くことになる。

vim実行中にファイルを新規タブで開く

コマンド行に:tabnew [file]で新規タブで、file(必須ではない)を開くことができる。

タブの移動

「gt」(次のタブ)か「gT」(前のタブ)で切り替えられる。 「gT」が押しにくいと思う場合、.vimrcファイルとかに、次のように「gr」にmappingして使うことができる

nnoremap gr :tabprevious<CR>

開いたタブを一括で閉じる

:tabo<CR>

vim中快速生成列项递增数列(序号)

例如,想生成一下连续数字序号。

1
2
3
4

做法:在命令行模式下输入:r !seq m n (m是开始数字,n是结束的数字)
:r !seq 5 10的话,就会生成以下的序号

5
6
7
8
9
10

Nouns in Vim

Text Objects

  • iw => "inner word" (works from anywhere in a word)
  • it => "inner tag" (the contents of an HTML tag)
  • i" => "inner quotes"
  • ip => "inner paragraph"
  • as => "a sentence"

上記Objectsに対し、次のような操作が使える

  • diw => wordを削除
  • ciw => wordを置換
  • viw => word全体をビジュアル選択
  • yiw => word全体をコピーする
  • vip => paragraph全体をビジュアル選択
  • etc.

Parameterized Text Objects

  • f, F => "find" the next character
  • t,T => "find" the next character
  • / => Search (up to the next match)

Plugins

vim-surround

HTMLやXMLのタグを削除/変更/追加する等に大変便利。

github.com

vim-repeat

vimのplugin管理方法

vim-plug

vim-plug は vim の plugin manager の1つ。2020/12/22時点 github の Star 数を比較してみた。 .vimrcへの記述が少なくて済み、人気もあるため、自分はまずこれをマスターしようと思った。

Plugin Manager Star Remarks
Vundle 22k スター数が一番多い
vim-pathogen 11.5k
vim-plug 21.6k .vimrc への記述が少なくて済む
NeoBundle 2.3k 日本製
dein.vim 2.8k NeoBundle の後継

本家: GitHub - junegunn/vim-plug: Minimalist Vim Plugin Manager

how to install vim-plug

In the case maxOS / Linux

$ curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

In fact, the above command is in a line.

how to add plugin

An example makes vim auto-completed while programming is "deoplete". The official site is GitHub - Shougo/deoplete.nvim: Dark powered asynchronous completion framework for neovim/Vim8

pre-condition to intall deoplete

  • python3.6 or later

Because deoplete is written in python, so...

$ python3 --version
Python 3.9.1
  • python3 can be used in vim

It can be confirmed via the following command

$ vim --version | grep "+python3"
+conceal           +linebreak         +python3          +visualextra

If +python3 is effectice, it is Okay. If the resule is -python3, you maybe to the following,

$ brew uninstall vim
$ brew install vim
$ which vim
/usr/local/bin/vim
$ alias vim=/usr/local/bin/vim
$ vim --version | grep "+python3"

Add alias vim=/usr/local/bin/vim to .bashrc ( or .bash_profiile etc.) will be convenient.

  • install package neovim
$ pip3 install neovim

it is okay to install deoplete

  • Add the following lines to .vimrc
call plug#begin('~/.vim/plugged')
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'Shougo/deoplete.nvim'
Plug 'roxma/nvim-yarp'
Plug 'roxma/vim-hug-neovim-rpc'
let g:deoplete#enable_at_startup = 1

" https://github.com/deoplete-plugins/deoplete-jedi
Plug 'deoplete-plugins/deoplete-jedi'
Plug 'Shougo/neco-vim'
call plug#end()
  • in vim, add plugins
:PlugInstall

The plugins are begun to install and when "Finishing ... Done!" is displayed, it was completed. f:id:lgx:20201223011759p:plain

how to delete plugin

  • Comment out the lines in .vimrc or delete them
call plug#begin('~/.vim/plugged')
" Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
" Plug 'Shougo/deoplete.nvim'
" Plug 'roxma/nvim-yarp'
" Plug 'roxma/vim-hug-neovim-rpc'
" let g:deoplete#enable_at_startup = 1

" https://github.com/deoplete-plugins/deoplete-jedi
" Plug 'deoplete-plugins/deoplete-jedi'
" Plug 'Shougo/neco-vim'
call plug#end()
  • In vim, show plugin's status
:PlugStatus
  • In vim, clean plugin
: PlugClean
  • Confirm the question with "y"

Key Mapping

vimでキーマッピングする際に考えたほうがいいこと - derisの日記

nnoremap

Add the following to .vimrc

" reload .vimrc
nnoremap <Space>s :source $HOME/.vimrc<CR>
nnoremap j gj
nnoremap k gk
nnoremap gj j
nnoremap gk k

mapping to Leader key

Add the following to .vimrc

let mapleader = "\<space>""
" mapping to ^
nnoremap <Leader>a ^
" mapping to $
nnoremap <Leader>; $
" for NERDTree
nnoremap <Leader>n :NERDTreeToggle<CR>

Edit binary file

Add the following to .vimrc

" binary (xxd)(vim -b binary file or  *.o files etc.)
augroup Binary
  autocmd!
  autocmd BufReadPre  *.o,*.a,*.out let &binary = 1
  autocmd BufReadPost * if &binary | silent %!xxd
  autocmd BufReadPost * set ft=xxd | endif
  autocmd BufWritePre * if &binary | %!xxd -r
  autocmd BufWritePre * endif
  autocmd BufWritePost * if &binary | silent %!xxd
  autocmd BufWritePost * set nomod | endif
augroup END

テキストブラウザw3mを使ってみた

概要

テキストブラウザw3mを使ってみました。そのメモ書きです。

背景

最近、家にあるものすごく低スペックの2010年式のMacBook Airをいじる必要が出てきました。10年以上前に買った自分の初めてのMacBookですが、スペックは以下の通り

macOS High Sierra
MacBook Air (11-inch, Late 2010)
プロセッサ 1.4 GHz Intel Core 2 Duo
メモリ 2 GB 1067 MHz DDR3
SSD 128GB

今のブラウザはものすごくサイズが大きくて、たくさんのリソースを使うので、iTerm2とChromeを立ち上がるだけで、CPU使用率が95%を超えてしまうことがしばしばあります。

ちょっとした検索ならば、Terminal 上で動くテキストブラウザを使ってみたくなりました。
これがw3mを導入する背景になります

インストール

至って簡単、brew install w3mですんなり入りました(/usr/local/bin/w3m)。

設定を変えてみる

w3m(1) — Arch manual pages を参考に、動きをカスタマイズしてみました。

keymap

[tokuhirom/w3m](https://github.com/tokuhirom/w3m)を参考に、keymap.defaultをベースに変更してみました。

$ cp keymap.default keymap
$ vim keymap
$ /usr/bin/diff keymap.default keymap
32c32
< keymap   C-v NEXT_PAGE
---
> keymap   C-f NEXT_PAGE
44a45
> keymap   C-b PREV_PAGE

vim風のページ移動に変更してみただけ(カーソルの移動する際はhlkjが使える)。

また、configフィアルも少し変更しました。

/usr/bin/diff config.20211229 config
8c8
< display_link 0
---
> display_link 1
16c16
< multicol 0
---
> multicol 1
31,33c31,33
< color 1
< basic_color terminal
< anchor_color yellow
---
> color 0
> basic_color white
> anchor_color green
71c71
< editor /usr/bin/vi
---
> editor /usr/local/bin/vim
74c74
< extbrowser /usr/bin/firefox
---
> extbrowser /Applications/Firefox.app

w3m起動する際の動きを変更する

最初は~/.profileに以下のようにaliasを設定しました

alias w3m='/usr/local/bin/w3m -I utf-8 -O utf-8 -m -num -s'

次に、urlを開くのと、検索語を検索するのとを自動区別できるように以下の関数を作ってみました。

function w3() {
    var=$1

    if [[ ! ${var} =~ [0-9a-zA-Z?=#+_\&:/.%]+ ]] || [[ ! ${var} =~ \. ]] ; then
        w3m https://search.yahoo.co.jp/search?p="$var"
    else
        echo else
        w3m $var
    fi
}

こうすることで、例えば以下のような使い方ができるようになりました。

  1. URLを指定して開く
    $ w3 www.yahoo.co.jp
  2. キーワードを指定して検索 $ w3 ヤフー

まとめ

w3mはとても軽快で動いてくれます。javascriptが使えない、画像が見れないなど多くの制限はありますが、ちょっとした検索ならば、わざわざブラウザを立ち上がらなくても、terminalにいる状態で検索できるので、低スペックのPCにはいい選択です。

参考資料

Memo for Log4Shell(Apache Log4j Vulnerability)

Summary

Remote code execution vulnerabilities related to Apache Log4j.

Official source

Demonstration

www.youtube.com

PoC

Tester

References

Twitter

REVEAL.JSでMarddownスライド資料を作成

reveal.jsを使ってMarkdown形式でスライド資料を作成する。
参照するドキュメント * hakimel / reveal.jsGet Started * Markdown

環境構築

  • OS macOS Big Sur (11.6)
  • node v16.13.0
  • npm 8.1.0

Full Setup

  • Install Node.js (10.0.0 or later)

  • Clone the reveal.js repository

$ cd ~/dev
$ git clone https://github.com/hakimel/reveal.js.git
Cloning into 'reveal.js'...
remote: Enumerating objects: 14829, done.
remote: Total 14829 (delta 0), reused 0 (delta 0), pack-reused 14829
Receiving objects: 100% (14829/14829), 16.79 MiB | 7.09 MiB/s, done.
Resolving deltas: 100% (8452/8452), done.
  • Move to the reveal.js folder and install dependencies
$ cd reveal.js && npm install
  • Serve the presentation and monitor source files for changes
$ npm start
  • Open http://localhost:8000 to view your presentation

  • Alternate method to view presentation
    ブラウザでで/path/to/reveal.js/index.htmlを直接開く方法でも行けることを確認済。

Change Port

Default port is 8000, you can change the port using the following methos

$ npm start -- --port=8001

外部Markdownファイルの読み込み

<div class="reveal">
    <div class="slides">
        <section data-markdown="md/slide.md"
            data-separator="^---$"
            data-separator-vertical="^>>>$">
        </section>
    </div>
</div>

注意:

外部Markdownファイルを読み込む時には、index.htmlファイルをブラウザから開くだけでは反映されない! 必ずhttp://localhost:8000にて見ること。

PDF化

http://localhost:8000/?print-pdf#/ にアクセスすると、PDFとして出力される。
※ブラウザで直接index.htmlファイルを開いて、/path/to/reveal.js/index.html?print-pdf#/の方法でもPDF化できる。

参考資料(THX!)

Vimでブラウザ検索を楽にする

概要

Vimプラグインopen-browserを使ってVimの中にいる時のブラウザ検索と楽にすることをまとめる。

open-browserについて

本家:https://github.com/tyru/open-browser.vim に以下のように書かれている

Open URI with your favorite browser from your most favorite editor.

主な機能

  1. 検索する単語まで移動してgxを押す
    デフォルトのブラウザが立ち上がって(or new tabで)、カーソルの下にあった単語を検索してくれる。
  2. カーソルの下にあるurlに移動してgxを押す
    上記同様、urlのページを開いてくれる。
  3. Vim外の単語をブラウザ検索
    下記コマンドで検索できる、コマンドはタグ補完で入力を短袖できる。
:OpenBrowserSearch <検索ワード>

手順

プラグインをインストール

$ cd ~/.vim/plugged
$ git clone https://github.com/tyru/open-browser.vim

上記により、~/.vim/plugged配下に、open-browser.vimディレクトリが作成される。

次に、.vimrcファイルに下記を追加する

call plug#begin('~/.vim/plugged')
Plug 'tyru/open-browser.vim'
call plug#end()

" Search via plugin open-browser
let g:netrw_nogx = 1 " disable netrw's gx mapping.
nmap gx <Plug>(openbrowser-smart-search)
vmap gx <Plug>(openbrowser-smart-search)

次に、.vimrcを開いていている状態で以下のコマンドでプラグインをインストールしてからVimを再起動する。

:PlugInstall

うまく行けば、これで上記機能が使えるはず。

参考資料(Thx!)

GitHub Pagesを使ってみる

概要

github.comPages機能を使ってみたくて、昨日sphinx-revealjsを練習して作成したページを公開したので、その手順をまとめてみる。

自分の利用条件

今回は動作確認に近いので、公開ページの質は気にしない。

手順

  • リポジトリの作成
    <my username>/sphinxというリポジトリを作成した。
  • 公開ファイルの構成
    /docs配下のディレクトリにindex.htmlを配置する必要なので、python仮想環境で作ったsphinxでの出力ディレクトbuild/revealjs配下のファイルを丸ごとリポジトリ/docs配下にコピーするようにする。
  • Makefileの作成
    毎回手動では手間なので、ローカルのリポジトリに以下のMakefileを作った。
.PHONY: all

REVEALJS = $(HOME)/dev/sphinx/build/revealjs
TARGET = $(HOME)/dev/github/sphinx/docs

all: $(TARGET)/index.html

$(TARGET)/index.html:
    cp -rp $(REVEALJS)/* $(TARGET)

clean:
    rm -rf $(TARGET)/*
  • git commit / push
    ここまで来たら、いつものadd & commit & pushとかでgithub.comに公開ファイルを反映。
  • Pages公開設定
    github.comリポジトリ画面の右にある「Settings」にて

f:id:lgx:20210925193520p:plain:w400

の「Check it out here!」をクリックして、下記の「Source」部分を設定(設定内容は自分の場合)

f:id:lgx:20210925193756p:plain:w400

「Your site is published at」の所に緑の「」が付いてたら、公開設定が完了されている証拠。

公開後のトラブルシューティング

公開設定してから、1時間以上立ってもページアクセスの結果が「404」のまま。 ネットに、公開設定後に反映される(正しく表示される)まで1、2時間かかる場合があると書いている方がいるので、少し待つことにした。

ようやくアクセスできるようになったが、明らかに表示がおかしい(cssjsが反映されていない様子)。
ChromeデベロッパーモードのConsoleに、エラーがいっぱい出ているのではないか?、、内容をみると、どうやらdocs/_static配下にあるcssjsなどの読み込みエラー。

ネットで調べたら、GitHub Pagesで公開する|Sphinxでもプレゼンテーション によれば、

Sphinxの標準構成では、静的ファイルはまとめて/staticというパスにコピーします。 一方でGitHub PagesはJekyllというソフトで動作しているのですが、Jekyllのデフォルト動作として「アンダースコアで始まるパスは参照できない」という挙動となっています。 そのため、この問題を回避するために.nojekyllというファイルを用意することで、/static配下のファイルもリクエスト可能にする必要があります。

だそうで、早速ローカルリポジトリdocs/直下に

$ touch .nojekyll

して、続いて$ add / commit / pushした。そしてら、無事に正しく表示できた!

f:id:lgx:20210925195436p:plain:w500

まとめ

今回は手動で動作確認をしたが、1つ目の参考資料に書いてあるように、下記の2、3、4番を自動化させたい。

  1. 必要なソースを一通りコミットする
  2. ソースからHTMLをビルドする
  3. ビルドしたHTMLを特定ブランチにコミットする
  4. 上記のコミットをGitHubにプッシュする

参考資料(THX!)