前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >简化 kramdown 列表嵌套内容缩进的 Vim 插件

简化 kramdown 列表嵌套内容缩进的 Vim 插件

作者头像
零式的天空
发布于 2022-03-28 05:35:01
发布于 2022-03-28 05:35:01
1.2K00
代码可运行
举报
文章被收录于专栏:零域Blog零域Blog
运行总次数:0
代码可运行

kramdown 的列表嵌套内容的缩进规则很「奇葩」,不是使用自然的 Tab 缩进。

问题

kramdown 的作者对列表嵌套内容的缩进规则的 描述 是:

kramdown does not allow 4 space indent, …… Indentation for list items is always calculated based on the first non-space character after the list item marker.

在年初 GitHub 宣布 GitHub Pages 服务将只支持 kramdown 这个 Markdown 解析引擎时,我曾经总结过从 Redcarpet 迁移到 kramdown 需要做的一些更改,将 GitHub Pages 从 Redcarpet 切换到 kramdown 里有说到,嵌套在列表项里的代码块,如果不按如上规则做缩进的话,将会解析不正常。

比如:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. list item one

    ```python
    print 'hello, world'

list item two

list item two

这当然不是我们想要的,我们应该如何写呢?

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
1. list item one

   ```python
   print 'hello, world'

list item two

list item two

看出来区别了吗?没错,这种情况下代码块必须缩进三个空格,因为除开列表记号后的第一个非空字符的缩进是三。

那么问题来了,有时候是有序列表,序号是个位数时需要缩进三个空格,序号是两位数时需要缩进四个空格,序号是三位数时(弄这么大的列表是闹哪样?)需要缩进五个空格……有时候是无序列表,只需要缩进两个空格。

当然这是最简单的一级嵌套的情况,如果是多级列表嵌套,那情况就更复杂了,每一次都去手打空格缩进吗?作为一名 Vimer,当然 say no!

所以为此我做了一个简单的小 Vim 插件专门用于解决此问题。

下载地址

使用方法

安装完此插件后,在你需要对列表嵌套内容进行缩进时,不用掰着手指头去数要打多少个空格了,只用按 LeaderTab 就好了。

安装方法

推荐使用 Vundle 来管理你的 Vim 插件,这样你就可以简单三步完成安装:

在你的 vimrc 文件中添加如下内容:

:so $MYVIMRC

:PluginInstall

屏幕截图

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-03-28,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
132. 精读《正交的 React 组件》
搭配了合适的设计模式的代码,才可拥有良好的可维护性,The Benefits of Orthogonal React Components 这篇文章就重点介绍了正交性原理。
黄子毅
2022/03/14
5850
132. 精读《正交的 React 组件》
[第21期] 全面了解 React Suspense 和 Hooks
有些朋友可能会想, 数据早点获取回来,页面就能快点渲染出来呀, 提升用户体验, 何乐而为不为?
皮小蛋
2020/03/02
9340
07-React Hooks(路由组件懒加载, Context上下文, 组件优化...)
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
彼岸舞
2022/08/24
1.3K0
不同类型的 React 组件
自从 React 于 2013 年发布以来,出现了各种类型的组件。有些在现在的 React 应用中仍然至关重要,而另一些则主要出现在旧项目中(或者已被官方废弃)。
ACK
2024/10/06
860
react hooks api
hooks API是 React 16.8的"新增"功能(16.8更新于2年前)。官网是这么说的:
一粒小麦
2020/06/16
2.7K0
react hooks api
一道React面试题把我整懵了
提问:react项目中的JSX里,onChange={this.func.bind(this)}的写法,为什么要比非bind的func = () => {}的写法效率高?
beifeng1996
2022/09/30
1.2K0
美团前端一面必会react面试题4
props 更新流程: 相对于 state 更新,props 更新后唯一的区别是增加了对 componentWillReceiveProps 的调用。关于 componentWillReceiveProps,需要知道这些事情:
beifeng1996
2023/01/06
3K0
React 进阶 - lifecycle
React 类组件为开发者提供了一些生命周期钩子函数,能让开发者在 React 执行的重要阶段,在钩子函数里做一些该做的事。自从 React Hooks 问世以来,函数组件也能优雅地使用 Hooks ,弥补函数组件没有生命周期的缺陷。
Cellinlab
2023/05/17
8990
React 进阶 - lifecycle
社招前端react面试题整理5失败
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
beifeng1996
2023/01/09
4.7K0
React Hooks 快速入门与开发体验(一)
Vue 3 推出 Composition API 的时候,看到一些表示这和 React Hooks 很像的评论。
贤羽
2022/06/09
1K0
如何用 Hooks 来实现 React Class Component 写法?
温馨提示:因微信中外链都无法点击,请通过文末的 “阅读原文” 到技术博客中完整查阅版;
JSCON简时空
2020/03/02
2K0
前端一面react面试题总结
mobx相对来说⽐较简单,在其中有很多的抽象,mobx更多的使⽤⾯向对象的编程思维;redux会⽐较复杂,因为其中的函数式编程思想掌握起来不是那么容易,同时需要借助⼀系列的中间件来处理异步和副作⽤
beifeng1996
2023/01/06
2.9K0
面试官最喜欢问的几个react相关问题
你可以使用属性初始值设定项(property initializers)来正确绑定回调,create-react-app 也是默认支持的。在回调中你可以使用箭头函数,但问题是每次组件渲染时都会创建一个新的回调。
beifeng1996
2022/11/07
4K0
React 16.x 新特性, Suspense, Hooks, Fiber
React 16.6.0 引入了lazy和Suspense。React.lazy函数可以渲染一个动态的import作为一个组件。Suspense悬停组件,它会在内容还在加载的时候先渲染fallback。它们组合就能实现之前主要是使用loadable-components,来异步加载组件,Code-Splitting。
小刀c
2022/08/16
9130
React 16.x 新特性, Suspense, Hooks, Fiber
前端常见react面试题合集
Context 通过组件树提供了一个传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。
beifeng1996
2022/09/16
2.4K0
React Hooks 设计动机与工作模式
所谓类组件,就是基于 ES6 Class 这种写法,通过继承 React.Component 得来的 React 组件。以下是一个典型的类组件:
coder_koala
2021/05/28
9960
React Hooks 设计动机与工作模式
React 特性剪辑(版本 16.0 ~ 16.9)
在 18年的 JSConf Iceland 上, Dan 神提到 Concurrent Render 涉及到 CPU 以及 IO 这两方面。
牧云云
2018/12/24
1.4K0
React 特性剪辑(版本 16.0 ~ 16.9)
React Hook实战
在React Hook出现之前的版本中,组件主要分为两种:函数式组件和类组件。其中,函数式组件通常只考虑负责UI的渲染,没有自身的状态也没有业务逻辑代码,是一个纯函数。而类组件则不同,类组件有自己的内部状态,界面的显示结果通常由props 和 state 决定,因此它也不再那么纯洁。函数式组件,类组件有如下一些缺点:
xiangzhihong
2020/12/21
2.1K0
【React】883- React hooks 之 useEffect 学习指南
如果你不想阅读整篇文章,可以快速浏览这份摘要。要是某些部分不容易理解,你可以往下滚动寻找相关的内容去阅读。
pingan8787
2021/03/16
6.5K0
【React】883- React hooks 之 useEffect 学习指南
React Hooks 是什么
最近在重构 BadJS 的管理页面,使用 TypeScript + React Hooks 的技术栈,趁这个机会好好理一理 React Hooks 那些事儿。
李振
2021/11/26
3.2K0
推荐阅读
相关推荐
132. 精读《正交的 React 组件》
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验