vim 마크다운 프리뷰에서 grammarly 사용하기: use grammarly online editor with vim markdown-preview.nvim

tools/vim

vim 마크다운 프리뷰에서 grammarly 사용하기: use grammarly online editor with vim markdown-preview.nvim

seul chan 2020. 3. 16. 18:57

나는 영문으로 글을 작성할 때 grammarly 라는 도구를 애용한다. 무료로 여러 브라우저의 플러그인을 제공해 주고, 브라우저에서 텍스트 작성시 단순한 스펠 체크 이외에도 다양한 문법을 체크해 주기 때문이다.

하지만 나는 많은 글들을 vim으로 적기 때문에, vim에서도 grammarly를 사용하고 싶다는 마음에 브라우저로 프리뷰를 제공해 주는 markdown-preview.nvin에 grammarly를 활성화 시켜보기로 하였다.

우선 사용하려는 브라우저에 grammarly 플러그인을 설치한다. 각 브라우저 플러그인 페이지에서 설치 가능하다.

grammarly 플러그인은 브라우저의 텍스트필드에서만 활성화 되기 때문에, markdown-preview.nvim에 contenteditable="true"를 추가하여 미리보기 되는 마크다운 파일애서 grammarly가 활성화 되게 하였다.

markdown-preview의 index.html에 contenteditable="true" 추가
- 플러그인 자체의 파일을 수정해 주어야 한다.
- (vim8의 경우) 파일은 다음 경로에 있다 /.vim/plugged/markdown-preview.nvim/app/out/index.html
- <section>에 contenteditable="true"를 추가해주거나
- 아래 html을 복붙해준다 (0.0.9버전 기준)

section에 추가해 주어야 한다. 만약 body에 추가하면 grammarly 스크립트가 작동하면서 다음 에러를 발생시킨다; 'generic contenteditable' init FAIL Error: target is body

<!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/><title class="next-head"></title><link rel="shortcut icon" type="image/ico" href="/_static/favicon.ico" class="next-head"/><link rel="stylesheet" href="/_static/page.css" class="next-head"/><link rel="stylesheet" href="/_static/markdown.css" class="next-head"/><link rel="stylesheet" href="/_static/highlight.css" class="next-head"/><link rel="stylesheet" href="/_static/katex@0.11.1.css" class="next-head"/><link rel="stylesheet" href="/_static/sequence-diagram-min.css" class="next-head"/><script type="text/javascript" src="/_static/underscore-min.js" class="next-head"></script><script type="text/javascript" src="/_static/webfont.js" class="next-head"></script><script type="text/javascript" src="/_static/snap.svg.min.js" class="next-head"></script><script type="text/javascript" src="/_static/tweenlite.min.js" class="next-head"></script><script type="text/javascript" src="/_static/mermaid.min.js" class="next-head"></script><script type="text/javascript" src="/_static/sequence-diagram-min.js" class="next-head"></script><script type="text/javascript" src="/_static/katex@0.11.1.js" class="next-head"></script><script type="text/javascript" src="/_static/mhchem.min.js" class="next-head"></script><script type="text/javascript" src="/_static/raphael@2.3.0.min.js" class="next-head"></script><script type="text/javascript" src="/_static/flowchart@1.13.0.min.js" class="next-head"></script><script type="text/javascript" src="/_static/viz.js" class="next-head"></script><script type="text/javascript" src="/_static/full.render.js" class="next-head"></script><link rel="preload" href="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/index.js" as="script"/><link rel="preload" href="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_app.js" as="script"/><link rel="preload" href="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_error.js" as="script"/><link rel="preload" href="/_next/static/runtime/webpack-42652fa8b82c329c0559.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.0ecb7a5a0a4c96422d79.js" as="script"/><link rel="preload" href="/_next/static/runtime/main-17c41d51f6111961b054.js" as="script"/></head><body><div id="__next"><div id="page-ctn"><header id="page-header"><h3><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"></path></svg></h3></header><section class="markdown-body" contenteditable="true"></section></div></div><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","query":{},"buildId":"lENzNY5wHy4A7~5cArh7H","nextExport":true};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_error.js"></script><script src="/_next/static/runtime/webpack-42652fa8b82c329c0559.js" async=""></script><script src="/_next/static/chunks/commons.0ecb7a5a0a4c96422d79.js" async=""></script><script src="/_next/static/runtime/main-17c41d51f6111961b054.js" async=""></script></body></html>

이제 마크다운 프리뷰 파일에서 grammarly를 사용 가능하다!

아쉬운점

프리뷰의 수정은 파일에 적용되지 않기 때문에 스펠을 확인하면 vim에서 직접 수정해야 한다.
쌍방으로 수정되게끔 플러그인에 PR을 올릴 수 있으면 좋겠다 (만 희망사항)

English version

I use grammarly a lot for checking grammar while writing in English (since English is not my native language)

There're plenty of tools to write English - vim's internal spell check, LanguageTool and so on - but I prefer grammarly since it checks not only spells but also the grammar pretty well.

So I try using grammarly plugin for browser in markdown-preview.nvin

First, you have to download grammarly plugin. It supports chrome, firefox, safari.

Unfortunately, it is only activated in text editor (or editable tags) so I have to add contenteditable="true" to html itself.

Add contenteditable="true" to markdown section
- You have to fix the plugin file itself.
- The file is in /.vim/plugged/markdown-preview.nvim/app/out/index.html (for vim8)
- You can add contenteditable="true" in <section>
- Or you just copy & paste below (current version is 0.0.9)
  You have to add to section. If added in body, grammarly shows error like this; 'generic contenteditable' init FAIL Error: target is body
- <!DOCTYPE html><html><head><meta charSet="utf-8" class="next-head"/><title class="next-head"></title><link rel="shortcut icon" type="image/ico" href="/_static/favicon.ico" class="next-head"/><link rel="stylesheet" href="/_static/page.css" class="next-head"/><link rel="stylesheet" href="/_static/markdown.css" class="next-head"/><link rel="stylesheet" href="/_static/highlight.css" class="next-head"/><link rel="stylesheet" href="/_static/katex@0.11.1.css" class="next-head"/><link rel="stylesheet" href="/_static/sequence-diagram-min.css" class="next-head"/><script type="text/javascript" src="/_static/underscore-min.js" class="next-head"></script><script type="text/javascript" src="/_static/webfont.js" class="next-head"></script><script type="text/javascript" src="/_static/snap.svg.min.js" class="next-head"></script><script type="text/javascript" src="/_static/tweenlite.min.js" class="next-head"></script><script type="text/javascript" src="/_static/mermaid.min.js" class="next-head"></script><script type="text/javascript" src="/_static/sequence-diagram-min.js" class="next-head"></script><script type="text/javascript" src="/_static/katex@0.11.1.js" class="next-head"></script><script type="text/javascript" src="/_static/mhchem.min.js" class="next-head"></script><script type="text/javascript" src="/_static/raphael@2.3.0.min.js" class="next-head"></script><script type="text/javascript" src="/_static/flowchart@1.13.0.min.js" class="next-head"></script><script type="text/javascript" src="/_static/viz.js" class="next-head"></script><script type="text/javascript" src="/_static/full.render.js" class="next-head"></script><link rel="preload" href="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/index.js" as="script"/><link rel="preload" href="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_app.js" as="script"/><link rel="preload" href="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_error.js" as="script"/><link rel="preload" href="/_next/static/runtime/webpack-42652fa8b82c329c0559.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.0ecb7a5a0a4c96422d79.js" as="script"/><link rel="preload" href="/_next/static/runtime/main-17c41d51f6111961b054.js" as="script"/></head><body><div id="__next"><div id="page-ctn"><header id="page-header"><h3><svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M3 5h4v1H3V5zm0 3h4V7H3v1zm0 2h4V9H3v1zm11-5h-4v1h4V5zm0 2h-4v1h4V7zm0 2h-4v1h4V9zm2-6v9c0 .55-.45 1-1 1H9.5l-1 1-1-1H2c-.55 0-1-.45-1-1V3c0-.55.45-1 1-1h5.5l1 1 1-1H15c.55 0 1 .45 1 1zm-8 .5L7.5 3H2v9h6V3.5zm7-.5H9.5l-.5.5V12h6V3z"></path></svg></h3></header><section class="markdown-body" contenteditable="true"></section></div></div><script>__NEXT_DATA__ = {"props":{"pageProps":{}},"page":"/","query":{},"buildId":"lENzNY5wHy4A7~5cArh7H","nextExport":true};__NEXT_LOADED_PAGES__=[];__NEXT_REGISTER_PAGE=function(r,f){__NEXT_LOADED_PAGES__.push([r, f])}</script><script async="" id="__NEXT_PAGE__/" src="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/index.js"></script><script async="" id="__NEXT_PAGE__/_app" src="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_app.js"></script><script async="" id="__NEXT_PAGE__/_error" src="/_next/static/lENzNY5wHy4A7~5cArh7H/pages/_error.js"></script><script src="/_next/static/runtime/webpack-42652fa8b82c329c0559.js" async=""></script><script src="/_next/static/chunks/commons.0ecb7a5a0a4c96422d79.js" async=""></script><script src="/_next/static/runtime/main-17c41d51f6111961b054.js" async=""></script></body></html>
Can use grammarly in markdown preview

You can see the grammar check with the wrong words.

더보기

You must fix wrong words in vim because it doesn't changed from the browser to vim

저작자표시

'tools > vim' 카테고리의 다른 글

Learn vimscript the hard way: 18장 - Responsible Coding (0)	2020.03.20
learn vimscript the hard way - 17장. status line (0)	2020.03.18
learn vimscript the hard way 16: More Operator-Pending Mappings (0)	2020.03.15
Add localleader in vim : backslach - vim localleader 추가하기 (0)	2020.03.12
VIM: change vim commit message colo (0)	2018.12.21

현재글vim 마크다운 프리뷰에서 grammarly 사용하기: use grammarly online editor with vim markdown-preview.nvim

seulcoding

k8s, backend, Kubernetes, POD, Linux, section, Folding, fold, Shell Script, django, Service, Mac, kubernetes in action, Docker, configmap, helm, vim, external command, Shell, vimscript,

Today :
Yesterday :

seulcoding