기본 콘텐츠로 건너뛰기

See markdown preview in vim: vim에서 마크다운 미리보기

See markdown preview in vim: vim에서 마크다운 미리보기

나는 블로그 포스트 등 거의 모든 텍스트를 vim으로 작성한다.

그러다 보니 typora, marked 등 마크다운 편집기들이 제공하는 프리뷰 기능을 사용하지 못했는데, 찾아보니 vim에서도 동일하게 preview를 제공해주는 괜찮은 플러그인이 있어서 소개한다.

많은 플러그인이 있는데, 내가 선택한 플러그인은 vim-markdown-preview

이름은 nvim이지만 neovim 말고 vim8.1 이상에서도 사용 가능하다. 나는 vim8이상을 사용중이며 설치 방법도 쉬워 보이고, 다양한 기능을 제공하며 실시간 수정이 반영되는 점에서 해당 플러그인을 선택하였다. (github star 수도 많았다)

예시: 상당히 화려하게 사용하는데 사실 나는 header, list, image, code block 이외에는 잘 사용하지 않는다.

설치

(vim-plug로 설치하는 방법: vim-plug 사용법에 대한 포스트는 여기 참고)

다음을 ~/.vimrc 에 추가한다.

" nodejs와 yarn이 설치되어 있다면 아래 라인 추가 " 아마 대부분의 웹 개발자는 있을 것(?) Plug 'iamcco/markdown-preview.nvim', { 'do': 'cd app & yarn install' } " nodejs, yarn이 설치되어 있지 않으면 다음 라인을 추가 Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() } }

플러그인 설치하기

:source ~/.vimrc :PlugInstall

Command

현재 버퍼의 프리뷰를 보려면 다음 명령어를 실행하면 된다.

자동으로 브라우저에 localhost로 프리뷰를 띄워준다. :MarkdownPreview

프리뷰를 종료하려면 :MarkdownPreviewStop

사용 중에 vim buffer 상태에 따라 프리뷰 연동이 끊어지는 경우가 종종 있었는데 그런 경우 다시 :MarkdownPreview 로 띄워주면 된다.

English

I wrote almost every text in vim - including blog post and markdown.

There's plenty of plugins to see markdown preview in vim. I usevim-markdown-preview. It's easy to install, and it has simple functionality.

> Sample image from the markdown-preview.nvim

It only works on vim >= 8.1 or neovim

Installation

(Install with vim-plug)

Add below to ~/.vimrc

" If you don't have nodejs and yarn " use pre build Plug 'iamcco/markdown-preview.nvim', { 'do': { -> mkdp#util#install() } } " If you have nodejs and yarn Plug 'iamcco/markdown-preview.nvim', { 'do': 'cd app & yarn install' }

Install plugin

:source ~/.vimrc :PlugInstall

Command

To starting preview current buffer, type

It automatically opens the browser preview.

:MarkdownPreview

To stoping preview, just type

:MarkdownPreviewStop

from http://seulcode.tistory.com/449 by ccl(A) rewrite - 2020-03-17 08:54:04

댓글

이 블로그의 인기 게시물

[실습]NodeJS + EXPRESS + MySQL 을 이용한 게시판 만들기 3(MVC)

[실습]NodeJS + EXPRESS + MySQL 을 이용한 게시판 만들기 3(MVC) 실습2 이후 나머지 부분들 까지 라우터 모두 작성함 app/routes/posts.js app/controllers/postsController.js 현재까지의 소스 app/models/postsModel.js 현재까지의 소스 from http://thisblogbusy.tistory.com/139 by ccl(A) rewrite - 2020-03-15 09:20:05

[Full stack developer] 풀스택 개발자는 다 아는 사람? NO

[Full stack developer] 풀스택 개발자는 다 아는 사람? NO Full stack devloper 연봉과 수요가 높다는 풀스택 개발자란? 개발에대한 모든걸 알아야 될까? 'No'라고 한다 자바스크립트 책을 쓰고 코딩 커뮤니티나 학교에 무료로 나눠주는 외국 자바스크립트 선생님은 풀 스택의 의미는 모든 것을 말하는게 아니라 스택만 알면 된다고 한다. 이 스택은 MERN MERN (MongoDB, ExpressJS, ReactJS, NodeJS) 을 알면 풀 스택이라고 한다. I still get asked what is Full Stack developer? Do you need to know everything? Full...means everything right? No...you just need to know a stack. And it should probably be MERN. — JavaScript Teacher (@js_tut) March 19, 2020 참고 https://www.educative.io/edpresso/what-is-mern-stack?https://www.educative.io/courses/grokking-the-object-oriented-design-interview?aid=5082902844932096&utm;_source=google&utm;_medium=cpc&utm;_campaign=blog-dynamic&gclid;=CjwKCAjwsMzzBRACEiwAx4lLGykB0OJ1XYoz1vq-eARUzUKrN7ievxnrIJMA5hr-Ox4D1g9wlXfjrxoCPfQQAvD_BwE from http://forgottenknowledge.tistory.com/15 by ccl(A) rewrite - 2020-03-20 13:20:07

AWS instance로 Nodejs 구현하기

AWS instance로 Nodejs 구현하기 서버와 데이터베이스 관리 차원에서 효율적으로 관리하기 위해선 로컬보다는 서버를 호스팅해서 하는 것이 좋다. 우리는 Nodejs를 구동하기 위해 AWS에서 인스턴스를 할당받을 계획이다. 인스턴스의 pem키를 발급받아 nodejs와 npm까지는 설치를 완료한 상태이다. $ sudo npm install -g express 다음의 명령어를 입력하면 글로벌 옵션으로 어느 path에서든 express를 사용할 수 있게 설치한다. 다음과 같이 실행이 된다면 성공이다. 이후 Express generator를 설치한다. $ sudo npm install -g express-generator@4 버전은 4.x이며 이 역시 글로벌 옵션으로 설치해 준다. 이제 Node monitoring을 위해 nodemon을 설치해 준다. $ sudo npm install -g nodemon 모든 설치가 끝났다. 이제 nodejs를 실행시킬 프로젝트용 directory를 만든다. 이렇게 만들어 주고 express를 실행시키면 된다. $ express -e 다음과 같은 결과가 나오면 된다. 이제 node package를 설치하는 명령어를 입력하자. $ sudo npm install 이제 vi를 통해 포트번호를 정의해보자. app.set의 마지막에 한줄을 추가하면 된다. app.set('port', process.env.PORT || 9000); 이로써 우리는 9000번 포트를 사용하게 되었다. 또한 마지막줄에 서버를 생성하기 위한 코드를 작성하자. module.exports = app; var server = app.listen(app.get('port'), function() { console.log('Express server listening on port ' + server.address().port); }); 이