vscode/IDEA_markdown写作环境配置(标题大纲outline/字典单词补全/预览/公式编辑/图床/表情补全)/markdown emoji(vscode表情预览支持)

文章目录

声明

vscode(extensions)+typora组合拳配置

vscode(extensions)

  • vscode(extensions)

    • (特别是文本编辑模式下可以利用vscode的智能插件(补全等),
    • 以及继承了文本编辑快捷键,比较熟悉,甚至使用neovim插件)
    • 文件目录管理更加专业
    • 遗憾的是 vscode上的插件(所见即所得编辑插件)多少还是有些不如任意的地方,bug还是有许多

    幸运的是,vscode+typora合作就可以达到很舒适的效果

typora

  • typora的主题/按键/可定制性好/图床上传更方便配置
    • 所见即所得编辑器经常会画蛇添足的自动处理,这时候需要切换到原码编辑
    • 用typora(测试版就够,正式版收费了)
    • vscode的文本编辑可定制性好,补足gui编辑的格式控制
  • Open in Typora - Visual Studio Marketplace

vscode+typora 配合方式

  • 在vscode中设置默认以text-editor的方式打开(open with)
  • 在这里插入图片描述
  • 特别是在粘贴富文本/网页片段的时候,typora的表现还是较好的
    • vscode下有一款markdown preview eidtor的转换效果更加强大(可是可定制性不足,遂主要用typora做大量的编辑)
    • 在这里插入图片描述

vscode相关插件一览

在这里插入图片描述
在这里插入图片描述

image-20220405110504369

  • 有许多功能重复的,不过新手用后面两个中的一个基本上就够了
  • (但是大的文章经常打不开)

VS Code plugins categories:

  • completion
  • hint
  • autocompletion
  • cursor

vim&neovim

  • 这个在写代码的时候比较好用

  • 写英文的时候还是可以用用

  • 但是对于写中文内容的时候和输入法的配合比较不理想

    • 但是,不管怎么说,应该取其精华,灵活使用其好用的部分,不必完全抵触鼠标
      可以配置vscode编辑器本身的快捷键
    • 切换会非vim模式也就一个i键即可;

markdown 设置和相关插件设置

开启/关闭自动预览markdown文件

内置预览功能设置

在这里插入图片描述

yarkdown插件的自动预览(打开模式)

在这里插入图片描述

关于流畅编写

  • 可以考虑关闭掉预览/vim/词典补全/之后编写会更加流畅一些!(特别是编写中文部分)

启用英文单词提示补全(optional)

grammar语法检查插件(optional)

  • grammar
    • 适当使用,可以不用(连接到服务有点久,可以断开重连,一般都是手动连接才成功:cray:)

保留html格式粘贴/富文本粘贴

在这里插入图片描述

基于vditor的一些插件

在这里插入图片描述
在这里插入图片描述

  • 富文本粘贴的话,以上几个插件下的编辑模式原生支持富文本粘贴
    • 可以直接用vscode all markdown/office viewer来粘贴
    • 复杂一些的格式处理不了的,可以尝试用typora
      • 效果互有胜负
介于html和markdown之间的siyuan笔记软件

支持富文本粘贴的相关插件:

  • Markdown Image - Visual Studio Marketplace
    • 20211124190750
    • 粘贴网页的时比较好用,可以保留格式(但是这个功能需要在完全加载好的网页上使用,否则无法完全转换)(总体上效果一般,可以粘贴一些网页地址)
smart paste for markdown

单词计数:

latex公式补全支持

  • all in one 插件提供了latex的一定程度的补全功能
  • 20211124194606

表情补全

  • emojisense 提供了表情补全与预览补全支持
  • markdown emoji 让vscode自带的markdown预览支持表情预览
  • 可以被强大的preview enhanced 插件所取代,好在它比 preview enhanced 开销较小

异常/冲突/问题

  • 基于vidotr的插件某些时候无法正常渲染出来,这可以尝试将内容复制到新建空白文件(插件错误)

    • 在这里插入图片描述

    • 注意该插件(vscode all markdown)的文件保存问题,自动保存模式下,如果频繁撤销/保存,容易发生冲突

    • 在这里插入图片描述
      以上两款比较强大,但也是不够稳定的.

以下这一款比较稳定,但是功能稍弱
在这里插入图片描述

图床配置

可以单独通用使用pigco软件:GUI/CLI客户端
下面是vscode插件中的picgo使用接口

picgo+github

主要配置如下

注意,路径结尾用/,而不要用\

20211124203831
填写github token
在这里插入图片描述

github图床分支Notice
  • 在github上创建的仓库需要创建一个具体的分支,最好在创建一个目录(比如名为image)
  • 也就是说,最好将新建的仓库克隆到本地进行一定的设置(创建个目录,add&commit&push到远程仓库)然后检查一下分支到底是叫做什么

任何一个地方不匹配,都有可能导致图片上传不上去!

  • 当然直接在网页端操作github也行.但是该检查的项还是要检查.

基本的使用方式

  • 可以用快捷键(默认为ctrl+alt+u,还算顺手,也可以自定义修改)
    在这里插入图片描述
github图床失效问题
  • 考虑使用smms作为图床(免费,配置起来比github/gitee方便多了)

  • github上的图片容易失效(或者说直接引用图床上传的连接容易时间久后就无直接加载,而按照网友的说法,在图床上传成功后生成的连接后面带上?raw=true会好一些,实际情况我尚未验证,可以按照如下方式配置:)

  • 但是总的来说还是不稳定的,时而可以加载出来,时而不行

  • 一般多刷新几次

    • 20211124195150
      - 即,将输出格式配置一下(加上后缀)

标题大纲outline(navication)

切换编辑模式(vscode插件切换)(常用💕)

推荐配置一个快捷键:


我常用是以下前三种

vscode markdown GUI extensions使用总结

在这里插入图片描述

Markdown Preview Editor

  • 主要在用的插件
    • 快捷键缺失,依赖按钮
    • 依赖外部图床的
      • 图床插件(picgo for vscode)/
      • 单独的Picgo软件/
      • Picgo命令行手动上传获取链接
  • Markdown Preview Editor在格式控制上可能是最强的
  • 特别是富文本粘贴,接受能力很强
  • 不规则表格构建能力也很强
    • 在这里插入图片描述

vscode all markdown

  • 我最常用的markdown插件:vscode all markdown:

    • 遗憾的是,打开大文件经常打不开
      vscode all markdown

    • 上下插入的图标是5.0版本提供,6.0只可以通过快捷键(ctrl+shift+b/e)来向上/下插入水平线

office viewer(markdown editor)

  • 最稳的可视化编辑器
  • 打开还行,但是某些编辑会导致内容丢失,遂转向了typora
vscode all markdown可视化插件的基本配置

为了更好的使用这类可视化插件,可以稍微了解一下以下操作

从代码块种跳出来
  • 按向下箭头键,直到跳出来为止
    • 在这里插入图片描述
直接切换编辑模式
  • open with… 指令
  • for vscode all markdown
    • 传统模式
    • 所见即所得模式
可以自定以主题/编辑背景

配置完后需要重新打开markdown文件以生效

多种编辑(渲染)模式

在这里插入图片描述

部分插件可视化插件基本操作

进入列表之后怎么停止列表并开始新的段落?

  • 进入列表模式后似乎很难直接将跳出列表

  • 可以连续键入enter键,可以逐步跳出

    • 对于嵌套的列表,每连按两次可以跳出一级
    • 在这里插入图片描述
    • 在这里插入图片描述
    • 在这里插入图片描述

  • 也可以选择分割线来跳出

列表缩进问题
方式1:(不总是有效)
  • 如果列表的两点是有两行内容单独添加-或*来渲染的,那么很可能位于下面的一行无法缩进,可以将光标移动到位于下面的行的行首,键入两次backspace删除掉圆点(圈),使得两点内容合并为同一点,然后随即键入回车,重新分为两点,这时位于下面的点可以别缩进:
    • 在这里插入图片描述
    • 在这里插入图片描述
方式2

在方式1无效的情况下,可以尝试手动输入- 然后开始输入内容
在这里插入图片描述

  • 用空格隔开- 和第一个非空格字符,当键入第一个非空字符后,可以自动调整排版,并渲染出圆点
    在这里插入图片描述
  • 这种风格的缩进也不错
    在这里插入图片描述
    • 选中后shift+tab可以升级子项
    • 在这里插入图片描述
      但是似乎无法批量将行设置为列表
方式3(通用)
  • 进入源代码模式进行编辑

单项的列表项的添加/反添加

typora 可能也适用

方式0

进入原码模式进行操作

进入源代码模式进行编辑

  • (特别是文章较短的时候)
  • 需要大量修改的时候
  • 如果文章较长,可以更具大纲目录来加速定位
  • 在UI模式复制部分文字,在原码模式下搜索定位
方式1

切换到支持独立编辑列表的插件进行编辑
用它们提供的按钮/快捷键来操作

  • 在这里插入图片描述
    在这里插入图片描述
方式2

例如,现在欲独立出来中间一项
在这里插入图片描述

在这里插入图片描述

上下添加回车,来讲目标项独立出来在这里插入图片描述
最后,反向list
在这里插入图片描述

编辑链接
  • 实时渲染模式下编辑链接时,通过点击链接末尾(或者用上下左右方向键来peek源码)
    在这里插入图片描述
  • instant Rendering 模式下,点击链接中部没有反应
    在这里插入图片描述

单击末尾,查看/编辑链接
在这里插入图片描述

富文本粘贴/网页内容转换成markdown

  • 符文本粘贴方面,vscode all markdown和typora互有胜负(指,从网页复制内容后粘贴转成markdown后的效果),markdown preivew editor 可能是最强的
  • 前者处理复杂格式的时候可能不是很完美,但是在提取大纲的方面似乎优于后者
  • 可以同时使用

IDEA

posted @ 2021-11-24 19:55  xuchaoxin1375  阅读(76)  评论(0)    收藏  举报  来源