Obsidian插件 之 Markdwon-it-container 功能需求调研

先引

  • 为什么需要?
      1. 如果平时有使用将笔记上传到 VuePress/VitePress/其他可以使用md-it的博客平台,那么很可能会比较希望Obsidian和博客的上浏览体验保持高一致性。
      1. ob实现 ::: 语法,有助于快速加载大量的mdit插件(只需略微修改就能拿过来直接用,而不用重复开发)
  • 技术上可行吗?
    • 技术上,Markdown-it-container 的一些功能我也可以迁移过来,并且能保持原有的语法(ob的api默认建议使用代码块,现有插件中哪怕有些仿md-it功能的大多也是借助代码块,但如果你要将笔记发布到博客平台,依然建议使用 ::: 来选择一段文本,而 ::: 选择器我以前其实也做过出来了(就是实时模式生效,但在阅读模式下失效,但感觉可以解决)。
  • 能写那你就去写啊,BB什么
    • 调研下看需要的人多不多先,看看大家的做法,开发前需要惯例调研。而且目前个人没那么需要了。已经实现一个ob和mdit的通用插件 “Any Block”,感觉够我自己平时用的了

Markdown-it-container 语法

就是用两段 ::: 包括住一段范围,并且你可以增加 : 的数量达到嵌套选择的效果。

这种选择方式有很多优点:

  • 与代码块相比能嵌套
  • 其更适用于在内部嵌套md内容,若 ::: 选择器失效,显示效果也不差(因为一般也是包含的md内容)
  • 引用块虽然也能嵌套,也能嵌套md内容,但其前面要增加很多个 > 符号,并不方便

常用的基于 md-it-container 的插件

ob的callout、mdit的默认container、mdit的 plugin-alert

他们的效果是一模一样的,只是语法不同,场景不同。

  1. 第一个ob生效,是 > [!info] 触发
  2. 第二个mdit生效,是 ::: info 触发
  3. 第三个mdit生效,是 > [!info] 触发

那有没有在ob生效,并使用 ::: info 触发的呢?—— 没有,但技术上可以写插件

一般本地使用ob,并有发布博客习惯的。通常作法是放弃使用 ::: 语法,使用callout语法,并在安装mdit插件alert。以实现两者样式上的统一。当然也有人寻求让 ::: 语法能在ob上生效,以实现两端效果一致,我还是说:可行,但目前没有这个插件。

plugin-demo/plugin-tab、质疑不可替代性

就普通的info/warn/error块来说。其实我更支持使用callout语法,在语法不被支持的环境下,可读性要更强。

甚至于一些 mdit 语法,也能够在callout的基础上去实现,例如:plugin align (left/right/center/justify) 或者分栏(这点可以见BT示例库)

但是对与其他的容器规则来说,我依然认为 ::: 语法有不可替代性,详见后面的插件介绍:

::: tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

当然,有没有可能在 callout 的基础上,赋予 callout 块里面的Heading特殊含义,也达成类似的语法效果呢?可以,但难度差不多。ob本身并没有提供callout块的选择器,也得自己写。并且我感觉没有必要增添新语法了,不然你发布博客的话,博客那边又得写个新插件……麻烦

待补充

懒得写了,有空再补充。或者自己去了解

3 个赞

实现、效果

Markdown-it-contianer 的 ::: 首尾选择器在Obsidian上的实现:

(Any Block 插件,的下一发布版本支持)

不足

  1. 当前仅实时模式有效,阅读模式代码未写
  2. 只实现了基本的info/warn/error,并未迁移和实现众多markdown-it-container相关的插件。但楼主在此抛砖引玉。希望以后能有更多全平台通用的的插件百花齐放(无论你在Obsidian,还是自行搭建博客,还是以后使用其他md软件,都能保持一致性!)。
1 个赞

new feature

迁移了两个mdit-container类别的功能到ob:

不足

  1. 阅读模式代码未写
  2. mdit-container 未支持嵌套

其他

博客发布的需求这么少?没人回复的?还是说你们博客发布不在意两边的显示结果不匹配的问题?

2 个赞

好了,最新版 Any Block V3.0.4 支持了这种功能和写法了。已上架社区插件市场,自己去搜就行了

1 个赞

需要啊 非常需要 可能大家都比较害羞没发言

我虽然不发博客 但是即使是在ob里也希望有类似你说的用两个符号能包住多段文字的功能 一直在找 没找到合适的

callout之前好像包在里面的内链不能识别(现在可能可以了) 而且编辑文字时 实时渲染与源码模式互相切换时 有点跳来跳去找不着北的感觉(这个可能可以通过css修改 我是希望实时渲染仅仅是给包住的几段文字加个边框或是背景之类的 让我知道那几段文字是在一起的就可以了 行距之类的不要变)

目前是采用加引用符号>的方式,但是这个得写无数个>,而且好像还不能嵌套列表或是代码块

最后问下,多段文字头尾加上:::后,其它地方要引用这个多段文字,是可以引用的吗?

可以吧。编辑体验其实也和callout差不太多,只是从每行要前置 > 变成了头尾标志的选择。

已使用,好用的 :smiling_face_with_three_hearts:

不过我用的时候出现了2个问题:

  1. FR:tab页数太多它是堆叠显示的,能否改为可左右滑动,或者高度自动适应。

  1. BUG:如果标签页里面是表格直接无显示

tab项过多的问题

修好了,之前没测试过标签页过多的情况

  • 可以到Github上更新到最新版 (3.0.5-beta5)
  • 或者可以手动修改插件文件夹里anyblock插件的styles.css,将 .ab-note .ab-tab-root .ab-tab-nav { height:40px; ...... 从的 height:40px; 删掉
  • 社区插件没那么快更新,还需再做点其他工作再一并更新

标签页里是表格

我试了下没有问题,你可以确认一下:

  1. 试图简化表格,看到底是表格的问题还是说特定的复杂表格存在问题。
  2. 如果简化后依然存在问题/问题解决,欢迎提供导致出现问题的复现源码(最好是最小复现源码)

表格问题解决了,是跟Sheets Extended插件冲突了
目前的需求就是编辑模式的标签页模式可以编辑就好了,然后阅读模式静待更新。

很有用,我对前端会的不多,就只能写个转换工具。