VSCode에서 MarkDown 작성 환경을 구축하는 방법에 대해 이야기해 보겠습니다.

Typora 요금? 다음 기사에서는 VSCode에서 MarkDown 작성 환경을 구축하는 방법을 소개합니다. 이는 오픈 소스 소프트웨어이며 완전히 신뢰할 수 있습니다! 적극 추천합니다!

제가 가장 익숙하게 사용하는 MarkDown 작성 도구는 Typora입니다. 풍부한 테마와 결합된 WYSIWYG 사용자 경험은 사람들이 "정말 맛있다"고 말할 수 없게 만듭니다.

하지만 Typora 1.0 이후부터 충전이 시작되었다는 것은 모두가 알고 있는 사실입니다. 최근 Mac 컴퓨터에 설치된 Typora에서 업그레이드하라는 메시지가 표시되기 시작했습니다. 게다가, "비쓰레기 대응 매뉴얼"을 정리하던 중, Typora는 파일이 너무 커서 막히게 되었습니다. 그래서 고민 끝에 VS Code를 사용하여 MarkDwon 작성 환경을 구축하기로 결정했습니다.

1. VS Code 설치

VS Code 설치는 말할 필요도 없이 공식 홈페이지에서 해당 버전의 설치 패키지를 다운로드하여 설치하면 됩니다. [추천 학습: "vscode 입문 튜토리얼"]

공식 웹사이트 다운로드 주소: code.visualstudio.com/Download

이것은 내 Windows 컴퓨터에 설치된 VS Code입니다. 주의하세요. 중국어 플러그인이 설치되어 있기 때문에 사이드바가 모두 중국어로 표시됩니다.

2. MarkDown 플러그인 개선

VS Code로 MarkDown 파일을 직접 열었을 때의 효과를 살펴보겠습니다.

오른쪽 상단에서 이중 열 미리보기를 열 수 있습니다.

괜찮아 보이지만 개선의 여지가 있으며 일부 플러그인을 설치하여 개선할 수 있습니다.

1. Markdown All in One

Markdown All in One은 올인원 MardDown 향상 플러그인입니다.

키보드 단축키, 디렉토리를 포함하여 Markdown에 필요한 모든 기능을 지원한다고 주장합니다. , 자동 미리보기 등의 경우 확장 페이지 또는 창고 문서를 살펴볼 수 있습니다.

• https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one
  
• https://github.com/yzhang-gh/vscode-markdown/blob/master/README.md
  

2.Markdown Image

Markdown Image는 주로 MarkDown에 그림을 삽입하는 확장 프로그램입니다. 로컬 또는 타사 이미지 베드 또는 개체 저장소에 그림 배치를 지원합니다.

이 플러그인을 사용하면 Typora와 유사한 로컬 이미지를 직접 복사한 다음 MarkDown에 붙여 넣을 수 있습니다. 이미지 파일은 기본적으로 로컬에 배치되며 Imgur를 지원하도록 구성할 수도 있습니다. Qiniu 코드>, SM.MS, 코딩 등 Imgur，七牛，SM.MS，Coding 等图床。

安装完这个插件之后，可以做一些配置，进配置页，搜索：markdown-image，可以配置一下相对路径，默认图片文件保存在/res路径下。

使用快捷键Shift+Alt+V

설치 이 플러그인을 완료한 후 구성 페이지로 이동하여 markdown-image를 검색하면 기본 이미지 파일이 /res 경로입니다.

사용 단축키 Shift+Alt+V를 사용하면 클립보드에서 복사한 이미지를 문서에 직접 붙여넣을 수 있습니다.

3. Markdown Preview Enhanced

Markdown Preview Enhanced는 VS입니다. 코드 미리보기 기능을 사용하면 VS Code의 미리보기 환경을 개선할 수 있습니다.

이 플러그인을 설치한 후 향상된 미리보기를 사용하려면 미리보기 버튼을 클릭하세요.

🎜사이드바에 디렉토리를 표시할 수도 있지만 디렉토리가 표시되면 전체 인터페이스가 약간 좁아 보입니다. . 🎜🎜🎜🎜🎜또한 여러 미리보기 테마를 제공합니다: 🎜

4.Word Count CJK

Word Count CJK는 중국어 단어 수를 세는 플러그인입니다.

저처럼 긴 글을 좋아하는 분들은 단어 수를 보시면 기사의 성취감도 가득합니다.

5. MarkDown Editor

Typora에서 WYSIWYG 경험을 원한다면 어떨까요?

플러그인 MarkDown Editor도 찾았습니다:

설치가 완료된 후 MD 파일에 대해 MarkDown Editor로 열기를 선택하여 MD 파일 WYSIWYG를 엽니다. Open with MarkDown Editor就可以所见即所得地打开MD文件了。

还有一些其它的插件：

• markdownlint：markdow格式检查
• Markdown Preview Github Styling：GitHub主题预览

大家也可以去体验一下。

三、图床搭建

使用MarkDown写作，还有一个重要的需求，就是图床，我们写的文章是要发布出去的，MD中的图片是以路径形式保存，本地的路径发布出去可没法访问，所以我们需要给MD编辑器接入图床的功能。

我之前用Typora+PicGo+Gitee搭建了一版图床，后来Gitee出了那档子事，又换成了Typora+PicGo+Github，我们也照这个思路，在VS Code上搭建一版图床。

1.GitHub仓库配置

2.1. 创建一个新的仓库

创建一个新的GitHub仓库：

• 公开，必须的，防止访问不到
• 添加一个READM文件，防止仓库没有主干分支

2.2. 生成token

• 进入settings

• 找到developer settings

• 创建新的Personal access tokens，时间设置为永不过期，给repo权限就可以了

• 生成的Token要记下来，只显示一次

2. 安装配置PicGo

2.1.安装PicGO插件

在VS Code里搜索PicGo，安装：

2.2.配置PicGO

• 打开PicGo的扩展配置

• 配置uploader，选择github

• GitHub相关配置，以我的配置为例：

  • Branch：main，分支

  • Path：空，也可以配置一个相对路径

  • Custome Url：空，

    其实可以配置一个CDN加速的url，jsDeliver，它是一个免费的CDN，最近似乎不可用了，大家也可以试一下，它的使用方法：https://cdn.jsdelivr.net/gh/你的github用户名/你的仓库名@发布的版本号

    다른 플러그인도 있습니다:
  • markdownlint: markdow 형식 확인
    Markdown 미리보기 Github 스타일링 : GitHub 테마 미리보기

  • 시험해 보실 수도 있습니다.

  3. 픽처 베드 구축
마크다운으로 글을 쓸 때 또 다른 중요한 요구사항이 있는데, 바로 우리가 쓰는 글이 게시되어야 한다는 것입니다. MD에 있는 사진은 경로 형태로 저장되어 있으며, 게시 시 로컬 경로에 접근할 수 없으므로 MD 편집기를 사진 베드 기능에 연결해야 합니다.

Typora+PicGo+Gitee를 사용하여 레이아웃 베드를 만들곤 했는데 Gitee에 문제가 발생하여 이를 Typora+PicGo+Github로 변경했습니다. 아이디어, VS Code에 레이아웃 베드를 구축하세요.

1.GitHub 창고 구성🎜🎜

🎜2.1 새 창고 만들기🎜

🎜새 GitHub 만들기 저장소: 🎜

🎜공개, 접근 불가를 방지하기 위해 필요🎜🎜저장소에 트렁크 브랜치가 없는 것을 방지하기 위해 READM 파일을 추가하세요🎜🎜🎜🎜

🎜2.2. 토큰 생성🎜

🎜🎜설정 입력🎜🎜🎜🎜🎜
🎜🎜개발자 설정 찾기🎜🎜🎜🎜🎜
🎜🎜새 개인 액세스 토큰을 생성하고, 만료되지 않는 시간을 설정하고, 저장소에 권한을 부여하세요🎜🎜🎜🎜🎜
🎜🎜생성된 토큰이 필요합니다 작성해주세요 다운하고 한 번만 보여주세요🎜🎜🎜🎜🎜

🎜2. PicGo 설치 및 구성🎜🎜

🎜2.1. PicGO 플러그인 설치🎜 h4>🎜 VS Code에서 PicGo를 검색하고 설치하세요: 🎜🎜🎜

🎜2.2. PicGO 구성🎜

🎜PicGo의 확장 구성 열기🎜🎜🎜🎜
🎜업로더를 구성하고 github🎜🎜🎜을 선택하세요 🎜
🎜 🎜 GitHub 관련 구성, 내 구성을 예로 들어 보겠습니다. 🎜
🎜🎜Branch: main, Branch 🎜🎜🎜🎜Path: 비어 있음, 상대 경로도 구성할 수 있습니다. 🎜🎜🎜🎜Custome Url: 비어 있음, 🎜🎜 가능 실제로 CDN 가속 URL인 jsDeliver가 구성되어 있습니다. 무료 CDN입니다. 최근에는 사용할 수 없는 것 같습니다. 시도해 볼 수도 있습니다. 사용 방법: https://cdn.jsdelivr.net/gh/your github 사용자 이름/웨어하우스 이름@출시된 버전 번호——🎜cdn.jsdelivr.net/gh/fighter3…🎜🎜🎜🎜🎜Repo:fighter3/picgo-win, 사용자 이름/웨어하우스 형식🎜🎜🎜 🎜토큰: 이전에 저장한 것을 입력하세요🎜🎜🎜🎜🎜🎜🎜🎜

3.

• 을 사용하여 MD 파일을 열고, 다른 곳에서 이미지를 붙여넣고, Ctrl + Alt + U，可以看到文件成功上传，并且可以预览



图片上传相关的快捷键：

OS	从粘贴版上传图片	从浏览器上传图片	从输入框上传图片
Windows/Unix	Ctrl + Alt + U	Ctrl + Alt + E	Ctrl + Alt + O
OsX	Cmd + Opt + U	Cmd + Opt + E	Cmd + Opt + O

GitHub을 그림 침대로 사용하는 것은 여전히 ​​전반적으로 이상적이지 않으며 업로드 및 액세스도 안정적이지 않습니다. 또한 PicGo 플러그인에서 이미지 베드를 Qiniu, Tencent Cloud 또는 Alibaba Cloud로 변경하는 과정은 일반적으로 비슷하고 비교적 간단합니다.


VSCode에 대한 자세한 내용을 보려면 vscode 튜토리얼을 방문하세요!

위 내용은 VSCode에서 MarkDown 작성 환경을 구축하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!