Vim/NeoVim으로 Mardown을 미리 볼 수 있는 플러그인을 만들었습니다.

지금 개발 중입니다.물건 사용에 문제가 되지 않을 순 없겠지만 이상한 행동을 할 때 알려주시면 좋을 것 같아요.

개시하다

Vism/NeoVim(Windows/Mac/Linux(+WSL)에서 지원하는 Mardown 미리 보기 플러그인이 생성되었습니다.
이 글은 제작 과정과 이 플러그인을 소개했다.

https://github.com/kat0h/bufpreview.vim

사용법

설치하다.

플러그 인은 Deno 및 denops.vim에 따라 다릅니다.
먼저 정식 설치부터 Deno를 설치하십시오.
denops.일반적인 Vim 플러그인과 같은 방식으로vim을 설치하십시오.
Plug-Vim:

Plug 'vim-denops/denops.vim'
Plug 'kat0h/bufpreview.vim'

처음 시작할 때 Typescript 파일의 의존 관계 다운로드를 실행하기 때문에 시작하는 데 시간이 걸립니다.

부팅

Markdown 파일을 열면 다음 명령이 캐시에 로그인됩니다.

:PreviewMarkdown
:PreviewMarkdownClose
:PreviewMarkdownToggle

명령을 실행하면 기본 브라우저에서 미리보기가 자동으로 열립니다.
또한 :PreviewMarkdownClose 명령이나 버퍼를 삭제하여 미리 보기를 닫을 수 있습니다.

기능

bufpreview.vim에서 대체적으로 다음과 같은 기능을 갖추고 있다.

실시간 콘텐츠 업데이트

편집기의 커서 위치와 동기화

동작 시범

실시간 업데이트 내용

이 플러그인은 키를 입력할 때마다 브라우저에 버퍼 내용을 보냅니다.
VScode의 내장 사전 뷰어를 사용하는 것처럼 변경 사항을 확인할 수 있습니다.

편집기 커서 위치와 동기화

편집기의 커서 행 렌더링 결과는 브라우저 화면 중앙에 표시됩니다.

창작 동기

Vim에는 이미 훌륭한 Mardown 렌더링 플러그인이 있습니다.
여러 가지 유형이 있지만'의존 관계를 쉽게 관리할 수 있다','변경 사항을 즉시 확인할 수 있다','커서 위치와 동기화할 수 있는 플러그인은 드물다.
https://github.com/iamcco/markdown-preview.nvim
처음에 ↑ 플러그인을 사용했지만 nodejs에 의존하는 것을 좋아하지 않거나 어떻게 된 일인지 몰라서 해봤습니다.
서버에서 사용denops.vim/Denonodejs처럼 번거로운 의존관계를 관리할 필요가 없고, 실행할 때 Deno의 2진법 하나만 있으면 의존관계를 자동으로 해결할 수 있어 매력적이다.

구조

이것은 플러그인 사용과 무관한 이야기다.
이 플러그인은 브라우저에 버퍼를 보내는 서버로 Type script 실행 시간Deno을 사용합니다.
또한 Vim과의 통신 사용denops.vim.
생략denops.vim의 상세한 내용.
이번에 denops.vim를 이용해서 타입 스크립트를 처음 접하게 됐는데 스타일리시한 언어가 너무 편해요.

업데이트 버퍼

autoocmd에서 버퍼의 업데이트를 감지하여 버퍼의 모든 줄을 Deno에 보냅니다.
버퍼는 buffer.ts출처에서 관리하고 server.ts출처는 Buffer에 등록된 콜백을 통해 업데이트 알림을 받는다.
장래denops.vim에 버퍼 모듈을 추가하기 위해Buffer 버퍼 모듈을 이용하여 이벤트를 업데이트합니다.

브라우저와 동기화

또한 서버에서 브라우저로 Websocket 사용을 전송합니다.
Deno의 std에std/ws가 있지만 새로운std/http과 함께 잘 일할 수 없기 때문에 Deno의 운행 시간 라이브러리에 있는 http 서버를 이용했습니다.( 해당 부분 )

Mardown의 렌더링

Mardown의 렌더링은 Markdown-it을 사용했습니다.
iamcco/markdown-preview.nvim 등의 대부분의 렌더기는 브라우저 쪽에서 렌더링되지만 이 플러그인은 Deno 쪽에서 렌더링된 HTML을 보내고 있습니다.
통신량이 크게 늘어난 단점이 있지만, 페이지 탑재 속도가 빠르다는 등 장점이 있어 이런 방식을 적용하고 있다.

화면 위치 동기화

화면 위치와 동기화할 때는 VimCursorMoved·CursorMovedI 활동을 사용합니다.
HTML에 행 번호 매기기 포함, 이 정보에 따라 제어굴러다니다.
이때 Mardown-it의 경우 대응하는 일부 대응에 손실이 발생하고, 대응하는 HTML 요소를 찾지 못하면 주변 위치에서 스크롤 목표를 계산한다.
생각 누락 등으로 고장이 났나봐요...
자바스크립트로부터의 스크롤 제어window.scrollTo()를 사용했지만 smoth-Sscroll 설정으로 사파리에서 사용할 수 없습니다Polyfill.

서버 포트

서버를 생성하도록 지정합니다.Deno 측에서 포트가 자동으로 할당됩니다.

금후

iamcco/markdown-preview.nvim의 사용 감각을 목표로 9/24 정도부터 개발하였으나 당분간 기본적인 기능을 실현할 수 있다.
향후 행동조정과 맞춤형 기능 추가, 대응 파일 유형 추가 등을 진행할 계획이다.
버그가 있었을 수도 있고, WS 주변의 고려 누락 등이 있었을 수도 있어요.https://github.com/markdown-it/markdown-it남았어, 내가 수정할게...