VSCode를 궁극적인 마크다운 편집기로 바꾸는 방법

웹용으로 글을 작성하는 경우 Markdown을 살펴보는 것이 좋습니다. 웹 작가를 위한 Markdown 앱이 많이 있습니다. 그러나 Microsoft의 VSCode(Visual Studio Code)와 같은 무료 코드 편집기는 훨씬 더 강력할 수 있습니다.

VSCode는 Markdown을 이해하고 HTML에서 미리 보기 위한 도구가 내장되어 있습니다. 그러나 단어 수 및 맞춤법 검사기와 같은 워드 프로세서 기능을 추가할 수 있습니다. 미리 보기에 대해 웹 사이트별 사용자 지정을 활성화할 수도 있습니다.

MAKEUSEOF 오늘의 비디오

마지막으로 Markdown을 HTML로 복사하여 콘텐츠 관리 시스템(CMS)에 깔끔하게 붙여넣을 수 있는 기능은 필수입니다.

VSCode 다운로드 및 설치

시작하려면 VSCode 또는 오픈 소스 대안 VSCodium을 다운로드하십시오. 각 버전은 모든 주요 데스크톱 운영 체제에서 사용할 수 있습니다.

게임용 PC를 구축할 수 있는 최고의 웹사이트

일단 당신이 VSCode 다운로드 및 설치 , 응용 프로그램을 실행하여 시작합니다.

단어 수 확장 설치

단어 카운터를 추가하여 시작하십시오. 이를 처리하는 많은 확장이 있습니다. 실제 단어와 코드 또는 파일 이름을 가장 잘 구별하는 것은 Microsoft의 자체 Word Counter 확장입니다.

다운로드: 단어 수 VSCode 확장(무료)

클릭 확장 프로그램 다운로드 아래에 자원 오른쪽 아래 창에서
다운로드가 완료되면 VSCode로 전환합니다.
클릭 기어 아이콘 인터페이스의 왼쪽 하단 모서리에 있습니다.
클릭 확장 .
줄임표( ... ) 확장 창 상단 근처에 있습니다.
딸깍 하는 소리 VSIX에서 설치 .
선택 ms-vscode.wordcount-*.vsix 방금 다운로드한 파일.

그만큼 단어 수 이제 확장 프로그램을 설치해야 합니다. 새 Markdown 파일을 열고 입력하여 테스트하십시오. 이제 인터페이스의 왼쪽 하단에 단어 카운터가 표시되어야 합니다.

부드러운 파란색 구불구불한 밑줄로 감지된 맞춤법 오류가 있는 VSCode에서 열린 마크다운 문서.

맞춤법 검사 확장 프로그램 설치

또한 맞춤법 검사 기능을 추가하고 싶을 것입니다. 단어 카운터와 마찬가지로 맞춤법 검사를 처리하는 확장이 많이 있습니다. 가장 인기있는 것은 코드 맞춤법 검사 다양한 언어로 제공되므로 Street Side Software에서 제공합니다.

다운로드: 코드 맞춤법 검사 VSCode 확장(무료)

위 섹션의 1~6단계를 따르세요.
선택 streetsidesoftware.code-spell-checker-*.vsix 방금 다운로드한 파일.

그만큼 코드 맞춤법 검사 이제 확장 프로그램을 설치해야 합니다. 새 Markdown 파일을 열고 철자가 틀린 단어를 입력하여 테스트하십시오.

4개의 철자 오류를 표시하는 표시기가 있는 VSCode 상태 표시줄의 오른쪽 하단.

인터페이스의 오른쪽 하단에 오류 수와 함께 해당 단어 아래에 파란색 구불구불한 선이 표시되어야 합니다.

사용자 지정 코드가 추가된 VSCode settings.json 파일이 열립니다.

오류 Squiggle 사용자 지정

이 맞춤법 검사 확장의 가장 큰 문제는 오류를 식별하는 물결선에 사용되는 약한 파란색입니다. 어두운 테마의 배경에 혼합되는 경향이 있으며 다른 Markdown 요소에 재사용됩니다.

워드 프로세서에서 볼 수 있는 것처럼 대담한 빨간색으로 변경해 볼 수 있습니다.

클릭 기어 아이콘 인터페이스의 왼쪽 하단 모서리에 있습니다.
클릭 설정 .
클릭 작업대 , 그 다음에 모습 .
아래로 스크롤 색상 사용자 정의 :
딸깍 하는 소리 settings.json에서 편집 .
새 탭에서 열리는 편집기에 다음 코드를 붙여넣습니다.
```
"editorInfo.foreground": "#ff0000"
```
그리고 파일을 저장합니다.

이제 단어의 철자가 틀리면 VSCode가 밝은 빨간색 물결선으로 해당 단어를 장식합니다.

가양성 무시

맞춤법 검사기는 특정 산업별 용어나 회사 이름과 같은 고유 명사를 인식하지 못할 수 있습니다. 예를 들어 위의 스크린샷에서 VSCode는 약어 'distro'를 맞춤법 오류로 강조 표시합니다.

이러한 단어가 오류로 표시되지 않도록 하려면 사용자 설정 .

맞춤법 검사기가 무시할 단어를 마우스 오른쪽 버튼으로 클릭합니다.
위로 마우스를 철자 그리고 선택 사용자 설정에 단어 추가 .

이제부터 맞춤법 검사는 더 이상 다음 단어를 잘못된 것으로 식별하지 않습니다.

HTML 확장으로 Copy Markdown 설치

다음으로 Copy Markdown을 HTML 확장으로 설치하여 서식이 지정된 Markdown을 복사하여 붙여넣을 수 있습니다.

다운로드: 마크다운을 HTML로 복사 VSCode 확장(무료)

위 섹션의 1~6단계를 따르세요.
선택 jeriepelser.copy-markdown-as-html-1.1.0.vsix 방금 다운로드한 파일.

이제 VSCode에서 Markdown을 복사하여 깨끗한 HTML로 CMS에 붙여넣을 수 있습니다. 이것을 테스트하려면:

일부 Markdown 텍스트를 선택하십시오.
열기 명령 팔레트 에서 보다 메뉴를 누르거나 Ctrl+Shift+P .
선택하다 마크다운: HTML로 복사 :
복사한 마크다운을 새 HTML 파일에 붙여넣습니다.

복사한 Markdown이 HTML로 제대로 붙여넣어진 것을 볼 수 있습니다.

미리보기 창 사용자 정의

기본적으로 미리보기 창은 현재 VSCode 테마와 동일한 스타일을 갖습니다.

이 기사의 마크다운은 huacat의 Office 테마를 사용하여 VSCode에서 열립니다.

그러나 미리 보기에 콘텐츠의 최종 목적지를 더 가깝게 반영할 수 있습니다. Markdown이 게시하려는 웹 사이트에 이미 있는 것처럼 보이도록 미리보기 창을 사용자 지정할 수 있습니다.

원하는 웹사이트를 사용할 수 있습니다. 다음 스타일은 MUO에서 가져왔습니다. 단지 브라우저의 요소 검사 도구를 사용하여 글꼴 찾기 그리고 모든 웹사이트에서 색상 선택 .

새 파일을 만들고 이름을 ' CustomStyles.css '

다음 예제 CSS 코드를 파일에 붙여넣습니다.

body { 
  background-color: #fff; 
  color: #2c2c2c; 
  font-family: Roboto; 
  font-size: 18px; 
  font-weight: 400; 
  line-height: 1.7em; 
  max-width: 750px; 
} 
  
h1 { 
  font-size: 38px; 
  font-weight: 800; 
} 
  
h2 { 
  font-size: 34px; 
  font-weight: 700; 
} 
  
h3 { 
  font-size: 24px; 
  font-weight: 700; 
} 
  
a { 
  border-bottom: 2px solid #bf0d0b; 
  color: #bf0d0b; 
  font-weight: 700; 
} 
  
a:hover { 
  color: #fff; 
  background: #bf0d0b; 
} 
  
strong { 
  font-weight: bold; 
}

그리고 파일을 저장합니다.
클릭 기어 아이콘 인터페이스의 왼쪽 하단 모서리에 있습니다.
클릭 설정 .
클릭 확장 그리고 가격 인하 .
아래로 스크롤 마크다운: 스타일 클릭 아이템 추가 .
당신의 경로를 입력 CustomStyles.css 파일(예:
```
C:\Users\Adam\CustomStyles.css)
```
딸깍 하는 소리 확인 .

이것들을 만들고 나면 이 기사와 매우 유사한 미리보기 창이 나타나야 합니다.

다시 말하지만, MUO에서 내 브라우저의 요소 검사 도구를 사용하여 이러한 값을 얻었지만 자신의 대상 웹 사이트에 대한 값을 찾고 싶을 것입니다.

에디터 테마

기본 VSCode 테마는 고대비 버전과 함께 어둡고 밝게 제공됩니다. 그러나 좋은 코드 편집기와 마찬가지로 수많은 훌륭한 타사 테마 사용 가능 .

코드 편집기보다 워드 프로세서의 모양을 선호한다면 huacat의 Office 테마를 추천합니다.

코드 편집기를 선호하는 경우 Dracula, Gruvbox, Material(아래 스크린샷 참조) 및 Nord와 같은 공통 테마를 모두 확장 마켓플레이스에서 사용할 수 있습니다.

새 테마를 설치하려면:

클릭 기어 아이콘 인터페이스의 왼쪽 하단 모서리에 있습니다.
클릭 확장 .
위에서 언급한 테마를 검색하거나 카테고리를 필터링하여 테마 사용 가능한 항목을 찾아보십시오.

VSCode는 궁극적인 마크다운 편집기입니까?

그렇다면 VSCode는 웹 콘텐츠를 위한 최고의 Markdown 편집기입니까? 기본 제공, 아마도 그렇지 않을 것입니다. 그러나 그것은 무엇이든 가능한 한 확장 가능합니다.

단어 카운터, 맞춤법 검사기, Markdown을 HTML로 복사, 사용자 정의 미리 보기 및 테마는 표면을 긁는 것뿐입니다. VSCode에 사용할 수 있는 확장으로 가득 찬 생태계가 있으며 자유롭게 만들 수 있습니다.