Skip to content

Commit

Permalink
feat: 🎸 add highlight for code markdown
Browse files Browse the repository at this point in the history
  • Loading branch information
wangshunnn committed Oct 9, 2024
1 parent 058b05a commit f45d958
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 10 deletions.
5 changes: 5 additions & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,11 @@ export default defineConfig({
lastUpdated: false,
cleanUrls: true,

markdown: {
// theme: { light: 'github-light', dark: 'github-dark' }
// lineNumbers: true
},

vite: {
plugins: [UnoCSS()]
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,8 @@ Vue 渲染机制流程
模板编译相关的代码放在 `src/compiler` 文件夹下,其中 `index.ts` 入口文件如下所示。从代码逻辑可以清晰地看见前面所说三个阶段。

```ts
```ts{14,18,22}
// src/compiler/index.ts*

import { parse } from './parser/index'
import { optimize } from './optimizer'
import { generate } from './codegen/index'
Expand Down
2 changes: 1 addition & 1 deletion docs/blog/vue2-template-compiler-part2-optimizer.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ place: 北京

### optimize 入口方法

```ts
```ts{12,14}
export function optimize(
root: ASTElement | null | undefined,
options: CompilerOptions,
Expand Down
14 changes: 7 additions & 7 deletions docs/blog/vue2-template-compiler-part3-generator.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ with(this) {
### generate 入口方法

```ts
```ts{14,19}
export function generate(
ast: ASTElement | void,
options: CompilerOptions
Expand Down Expand Up @@ -316,7 +316,7 @@ return `(isShow)

#### genTernaryExp

```ts
```ts{6}
function genTernaryExp(el: ASTElement) {
return altGen
? altGen(el, state)
Expand Down Expand Up @@ -378,7 +378,7 @@ export function genFor(

转换为 `AST` 节点如下:

```json
```json{11-14}
{
"type": 1,
"tag": "div",
Expand Down Expand Up @@ -419,7 +419,7 @@ _l((object), function(value,name,index){

`genChildren` 方法在 `genElement` 方法中被调用来生成子节点代码,简化后源码如下:

```ts
```ts{19}
export function genChildren(
el: ASTElement, // 当前的 AST 元素
state: CodegenState,
Expand Down Expand Up @@ -447,7 +447,7 @@ export function genChildren(

#### genNode

```ts
```ts{4,8,12}
function genNode(node: ASTNode, state: CodegenState): string {
// 如果 node 是 ASTElement 元素节点,则递归调用 genElement 生成元素节点代码
if (node.type === 1) {
Expand Down Expand Up @@ -478,7 +478,7 @@ export function genComment(comment: ASTText): string {

静态节点处理比较特殊,所以单独拎出来。对于在上一章中介绍的优化器(`Optimizer`)中标记为静态根节点(`staticRoot: true`)的 `AST` 节点,会经过 `genStatic` 方法处理。

```ts
```ts{4}
export function genElement(el: ASTElement, state: CodegenState): string {
// ..
if (el.staticRoot && !el.staticProcessed) {
Expand All @@ -490,7 +490,7 @@ export function genElement(el: ASTElement, state: CodegenState): string {

#### genStatic

```ts
```ts{11,15}
// 将静态子树提升到外部
function genStatic(el: ASTElement, state: CodegenState): string {
// 将 el.staticProcessed 设置为 true,递归 genElement 时,不再进入 genStatic 函数
Expand Down

0 comments on commit f45d958

Please sign in to comment.