跳至主要內容

Selector

LincZero大约 6 分钟

Selector

Many people see the dazzling effects of the display page and think that AnyBlock provides a lot of effects processing and rendering is the content of this plugin.

But that's not the essence of AnyBlock. The essence of AnyBlock, as the name suggests, is to pick any range and turn it into a block.

That is, the essence of AnyBlock is the selector

What is a selector?

This is an important concept in the plugin, and there are two important steps for markdwon's partial parsing rendering

  1. Range identification (I will call this step 'selector')
  2. Process or render the contents of this range (I will call this step 'processor')

Eight selectors

Traditional code block selector

```js       // This is the starting position (contains the line)
var a = 0;
```         // This is the end position (contains the line)

In obsidian, most plug-ins use this selector to identify ranges. Examples abound: tabs tabs, col tabs, mermaid, plantuml, and more

Traditional reference block selector

Other content

> [!note]   // This is the starting position (contains the line)
> 这是一个obsidian
> 的callout
> 语句       // This is the end position (contains the line)

Other content

This is also a selector, selected by reference block. However, compared to plug-ins with many code selectors, the selection using reference blocks is almost the only callout statement.

That's because - obsidian's development API doesn't provide a quick API for selecting a range of options in this way, and if you want to select a piece of md text in this way and work with it, it's pretty much a hand-jerk, which is hard

AB list selector

而 AnyBlock 提供了非常多能够轻松选择范围的选择器，并提供了丰富的解析渲染的处理器。

例如列表选择器：

\[...]      // This is the starting position (contains the line)

- 1
  - 2
-3          // This is the end position (contains the line)

Other content
  • Trigger: Add an AB selector header one or two lines above the list (the content expanded by square brackets)
  • Range selection: starts at the head of the AB selector and ends at the end of the following list

AB heading selector

In the previous "Effects Show", I always used the list selector because it is the most convenient, and to avoid introducing the concept of "selector" in the previous chapter, which would confuse people who are new to this plugin.

In fact, for a process like "card"/" TAB "/" column ", each subitem is usually a lot of content and more mixed, using the title selector or Mdit-Container selector is a better choice!

For example, a title selector:

## 二级标题

\[...]      // This is the starting position (contains the line)

### 三级标题

#### 四级标题

### 三级标题

内容         // This is the end position (contains the line)

## 二级标题
  • Trigger: Add a line of 'AB selector header' one or two lines above 'header' (the content expanded by square brackets)
  • Range selection: Start at the AB selector head, mark the title level below it as X, and select until a title level greater than X appears after it

AB codeBlock selector


\[...]      // This is the starting position (contains the line)

```js
var a = 1;
```         // This is the end position (contains the line)

Other content
  • Trigger: Add an AB selector header one or two lines above the code block (the content expanded by square brackets)
  • Range selection: Start at the AB selector header and select until the end of the following code block

AB quote selector


\[...]      // This is the starting position (contains the line)

> ...
> ...
> ...       // This is the end position (contains the line)

Other content
  • Trigger: Add an AB selector header one or two lines above the reference block (the content expanded by square brackets)
  • Range selection: Start at the AB selector header and select until the end of the following reference block

AB table selector

\[...]      // This is the starting position (contains the line)

| a | b |
|---|---|
| c | d |   // This is the end position (contains the line)

Other content

Mdit-Container ::: headtail selector

This is the syntax of markdwon-it-container, which is more common on the VuePress/VitePress blog.

Although this syntax was not designed by the AnyBlock authors, on Obsidian it is also provided by the AnyBlock plugin

Syntax:


\::: ...    // This is the starting position (contains the line)

任意内容

\:::        // This is the end position (contains the line)

Other content

Summary

Comparison of several selectors

  • Traditional code start selector
  • Advantages: built-in code coloring, nesting. Suitable for content that needs to include code
  • Disadvantages: If you include md content, the rendering results are not good without plug-ins
  • Traditional reference block selector
  • Disadvantages: there is no Obsidian supported API, difficult to develop. Writing is a bit cumbersome (with '>' per line), and nesting is a bit cumbersome
  • AB selector
  • Advantages: Unified format. Formatting is dull, there is no plugin embedded syntax pollution. Excellent rendering results without plugins when including md content
  • Disadvantages: For composite content, there is no choice. Flexibility and functionality are traded for portability and non-intrusion, resulting in the former two functions being inferior to mdit-container
  • Mdit-Container Indicates the selector
  • Advantages: Flexible selection range. Excellent rendering results without plugins when including md content. Nesting is very convenient
  • Disadvantages: It is not as efficient and fast as the AB selector for the selection of simple ranges, and the intrusion traces of the syntax are heavier
Note

The disadvantage of AB selector is not the disadvantage of AnyBlock plug-in, AnyBlock originally had its own head and tail selector, but later saw that the ':::' selector is more general and threw away its own '{}' head and tail selector syntax instead of that. What's more, in Obsidian, the ':::' selector is also provided by AnyBlock

Why is the essence of AnyBlock the selector

Although AnyBlock support is very rich in effects, but in fact many other plug-ins can do these effects. Whether in Obsidian or Markdown-it, such as the drawing of charts, timelines, columns, etc

The essence of AnyBlock is "selector"

  1. The first is to be able to choose the scope flexibly. It eliminates the need to implement additional syntax only through code blocks (Especially for ob, vueperss does have a mdit-conteiner selector)
  2. The second is that the way of selecting the scope is extremely convenient. Its syntax is convenient and non-invasive
  3. The third is the decoupling of the processor and selector. The processor doesn't care which selector you use to select the range

Use it flexibly

title = list

  1. Thanks to the 'title2list' processor and support for concatenated processors: any processor that can handle lists can also handle headings
  2. If there is any problem, you can use 'title2list|code()' to easily check the conversion and debug
  3. It is not recommended to use 'title2tab' instead of 'title2list|list2tab'. If there are existing 'title2' instructions, use existing ones
  • (Bottom reason: There are some differences between the two effects. Because 'title2list' needs to convert the structure to a multi-layer tree, but 'list2tab' only needs to convert the structure to a two-layer tree)

such as：

Plugin effect (插件效果)

a

1

2

3

b

b1

5

6

7

container = list

container can also be represented as a list (but only as a layer 2 list). This means that anything you can do with a layer 2 list, you can also do with the container selector syntax. Only the syntax is slightly different:

such as：tabs

\::: tabs

@tab t1

content1

@tab t2

content2

\:::

such as: cards or columns

\::: card (or col)

@card t1

content1

@card t2

content2

\:::

Concatenation syntax triggers other syntax

For example, some plug-ins use a code block selector, but the content needs md content, we can optimize it:

Such as tabs, col plugins, etc. (although you should actually use anyblock's processor, which also has these two features)

For example, from reference block to code block

Plugin effect (插件效果)

// 这是一段 markdown 文本 var a = 0; // 这是代码

Example: Code block to reference block: (This is also what Admonition Plugin did before obsidian's callout syntax was supported)

Plugin effect (插件效果)
Note

这是一段 markdown 文本

指令：Xcode|quote|add(> [!note])

指令解释：去除代码块|加入引用块|在第一行插入("> [!note]")

With this flexible processor syntax, if the original plugin syntax is X, you can define a new syntax Y, let the Y syntax replace the X syntax at the same time make the original plugin work!

Alias system

Of course, you may dislike the idea of making instructions long and unreadable, but that's okay -- we also have an alias system. Allows you to define an alias to represent a string of instructions!

For example, the code2quote directive, which comes with the plugin, uses an alias system; essentially, code2quote is identical to Xcode|quote

The plugin comes with a number of very natural aliases (especially ** Chinese ** aliases), and in actual use, it is recommended that you use these aliases:

Supported shortcut aliases:

flow
流程图
mindmap
思维导图
脑图
mdMindmap
md思维导图
md脑图
table
multiWayTable
multiCrossTable
crossTable
表格
多叉表格
多叉表
跨行表格
跨行表
listTable
treeTable
listGrid
treeGrid
列表格
树形表
树形表格
dirTree
dir
目录
目录树
目录结构
wbs
工作分解图
timeline
时间线
fakeList
仿列表
标签页
分栏
卡片

Using an alias system makes the plugin syntax less invasive, for example:

Plugin effect (插件效果)

/

home

usr

etc

/network/interfaces

file