更新代码块用法

Author: lc-soft

blog/2023-02-01-decoding-libcss-source-code.md

@@ -11,6 +11,8 @@ LibCSS 是一个 CSS 解析器和选择引擎，由 C 语言编写，是 [NetSur
 
 笔者之所以选择研究 LibCSS 源码，是因为在改造 CSS 库 lcui/css 时遇到了瓶颈。虽然参考 MDN 上的 [CSS 值定义语法文档](https://developer.mozilla.org/en-US/docs/Web/CSS/Value_definition_syntax)设计并实现了 CSS 值定义语法的解析器和匹配器，但在解决取值的问题时一直找不到最优的方案，其难点在于 CSS 属性的值的数量和类型不是固定的，且由于 `background` 这类简写属性的存在，还得考虑如何复用取值逻辑。因此 LibCSS 作为一个 C 语言编写的且已经历过浏览器考验的项目，很适合作为笔者的研究对象。
 
+<!-- truncate -->
+
 ## 用法示例
 
 LibCSS 的示例程序源码在 `examples/exmaple1.c` 中，它展示了如何用 LibCSS 实现 CSS 样式的加载、选择和读取，我们先从它入手，了解 LibCSS 大致的用法和概念，以便于后续的深入研究。

docs/guide/2-installation.md

@@ -9,7 +9,7 @@
 
 假设应用程序项目目录中有个 vendor 目录专用于存放第三方库的源码，那么我们可以手动下载 LCUI 的源码包然后解压到 vendor 目录中，再将 LCUI 的 xmake.lua 包含进来即可：
 
-```lua title=xmake.lua
+```lua title="xmake.lua"
 includes("vendor/LCUI/xmake.lua")
 
 target("app")
@@ -35,7 +35,7 @@ git submodule update --init --recursive
 
 下载 LCUI 的已编译的文件包，解压到特定的目录内，例如：vendor 目录，然后添加编译和链接配置：
 
-```lua title=xmake.lua
+```lua title="xmake.lua"
 target("myapp")
   add_includedirs("vendor/include")
   add_linkdirs("vendor/lib")

docs/guide/3-quick-start.mdx

@@ -19,7 +19,7 @@
 
 首先，我们需要包含 LCUI 库的头文件，并初始化 LCUI 应用程序。
 
-```c title=main.c
+```c title="main.c"
 #include <LCUI.h>
 #include <LCUI/main.h>
 
@@ -38,7 +38,7 @@ LCUI.h 是 LCUI 库的头文件，而 LCUI/main.h 是则是程序主入口的头
 
 LCUI 应用程序的用户界面是由**组件**组成的。组件拥有自己的逻辑和外观，可以小到一个按钮，也可以大到整个页面。
 
-```c title=main.c
+```c title="main.c"
 #include <LCUI.h>
 #include <LCUI/main.h>
 
@@ -66,7 +66,7 @@ import Window from "@site/src/components/QuickStart/Window";
 
 LCUI 的组件基于原型来实现组件的抽象和继承，组件原型记录了组件的创建、销毁、绘制、估算尺寸等方法，通过创建组件原型然后修改这些方法即可创建你的自定义组件。
 
-```c title=main.c
+```c title="main.c"
 #include <LCUI.h>
 #include <LCUI/main.h>
 
@@ -115,7 +115,7 @@ LCUI 包含 CSS 解析和选择引擎，你可以使用一些简单的 CSS 规
 
 首先创建一个 css 文件，填入以下内容：
 
-```css title=main.css
+```css title="main.css"
 root {
   padding: 24px;
 }
@@ -129,7 +129,7 @@ root {
 
 然后在 `main()` 函数中调用 `ui_load_css_file()` 函数从文件加载 CSS 规则，再调用 `ui_widget_add_class()` 函数为 text 组件添加 title 类名，以应用 CSS 文件中定义的 `.title` 的样式。
 
-```c title=main.c
+```c title="main.c"
 int main(int argc, char *argv[])
 {
         lcui_init();
@@ -200,7 +200,7 @@ LCUI 支持流式布局（Flow Layout）和弹性盒子布局（Flexible Box）
 
 以常见的垂直水平居中布局为例，我们可以使用弹性盒子布局来实现：
 
-```css title=main.css
+```css title="main.css"
 root {
   padding: 24px;
   // highlight-start
@@ -235,7 +235,7 @@ root {
 
 XML 写法如下：
 
-```xml title=main.xml
+```xml title="main.xml"
 <?xml version="1.0" encoding="UTF-8" ?>
 <lcui-app>
   <resource type="text/css" src="main.css"/>
@@ -252,7 +252,7 @@ resource 标签用于引入包括 CSS、字体在内的资源文件。ui 标签
 
 在 `main()` 函数中调用 `ui_load_xml_file()` 函数加载这个 XML 文件：
 
-```c title=main.c
+```c title="main.c"
 int main(int argc, char *argv[])
 {
         lcui_init();
@@ -287,7 +287,7 @@ LCUI 的组件是通过事件来实现与用户交互的，接下来我们让的
 
 首先，修改 XML 文件，为需要操作的组件添加 id 属性，以便于在代码中访问它们。
 
-```xml title=main.xml
+```xml title="main.xml"
 <?xml version="1.0" encoding="UTF-8" ?>
 <lcui-app>
   <resource type="text/css" src="main.css"/>
@@ -304,7 +304,7 @@ LCUI 的组件是通过事件来实现与用户交互的，接下来我们让的
 
 然后，添加点击（Click）事件处理函数和事件绑定。
 
-```c title=main.c
+```c title="main.c"
 // highlight-start
 void handle_my_button_click(ui_widget_t *w, ui_event_t *e, void *arg)
 {
@@ -349,15 +349,15 @@ import EventHandlerExample from '@site/src/components/QuickStart/EventHandlerExa
 
 首先，你需要定义组件状态的数据结构：
 
-```c title=main.c
+```c title="main.c"
 typedef struct {
         int count;
 } my_button_t;
 ```
 
 在初始化函数中初始化状态：
 
-```c title=main.c
+```c title="main.c"
 void my_button_init(ui_widget_t *w)
 {
         // highlight-start
@@ -371,7 +371,7 @@ void my_button_init(ui_widget_t *w)
 
 然后，定义一个更新函数，用于将状态转变为用户界面上实际要展示内容：
 
-```c title=main.c
+```c title="main.c"
 void my_button_update(ui_widget_t *w)
 {
         char str[64];
@@ -385,7 +385,7 @@ void my_button_update(ui_widget_t *w)
 
 初始化函数中也需要调用它来更新初始内容：
 
-```c title=main.c
+```c title="main.c"
 void my_button_init(ui_widget_t *w)
 {
         my_button_t *data;
@@ -399,7 +399,7 @@ void my_button_init(ui_widget_t *w)
 
 之后，添加点击事件的处理函数，在里面更改状态并进行更新：
 
-```c title=main.c
+```c title="main.c"
 // highlight-start
 void my_button_on_click(ui_widget_t *w, ui_event_t *e, void *arg)
 {
@@ -425,7 +425,7 @@ void my_button_init(ui_widget_t *w)
 
 最后，删掉 `main()` 中的事件绑定代码，像这样：
 
-```c title=main.c
+```c title="main.c"
 int main(int argc, char *argv[])
 {
         lcui_init();
@@ -444,7 +444,7 @@ int main(int argc, char *argv[])
 
 你可以在 XML 文件中添加多个 my-button 组件，然后尝试点击不同的按钮：
 
-```xml title=main.xml
+```xml title="main.xml"
 <?xml version="1.0" encoding="UTF-8" ?>
 <lcui-app>
   <resource type="text/css" src="main.css"/>

docs/guide/4-typescript.md

@@ -312,7 +312,7 @@ CSS 的作用域是全局的，如果你担心样式冲突，则可以采用 CSS
 
 首先，添加 `.module.css` 后缀的文件，写入 CSS 代码：
 
-```css title=MyComponent.module.css
+```css title="MyComponent.module.css"
 .card {
   border: 1px solid #eee;
   border-radius: 4px;
@@ -321,7 +321,7 @@ CSS 的作用域是全局的，如果你担心样式冲突，则可以采用 CSS
 
 然后在 `.tsx` 文件中使用 `import` 语句导入它：
 
-```tsx title=MyComponent.tsx
+```tsx title="MyComponent.tsx"
 import styles from './MyComponent.module.css'
 ```
 

docs/rfc/lcui-cli/0001-json-compiler.md

@@ -13,7 +13,7 @@
 
 示例 JSON 文件内容：
 
-```json title=home.json
+```json title="home.json"
 {
   "name": "lcui-app",
   "children": [
@@ -63,7 +63,7 @@
 
 示例 CSS 文件内容：
 
-```css title=home.css
+```css title="home.css"
 root {
   background-color: #f6f8fa;
 }
@@ -77,7 +77,7 @@ root {
 
 执行 `lcui compile home.json` 命令后，生成 `home.json.h` 文件：
 
-```c title=home.json.h
+```c title="home.json.h"
 /** This file is generated from home.json */
 
 #include <ui.h>

docs/rfc/lcui-cli/0002-xml-compiler.md

@@ -13,7 +13,7 @@
 
 示例 XML 文件内容：
 
-```xml title=home.xml
+```xml title="home.xml"
 <?xml version="1.0" encoding="UTF-8" ?>
 <lcui-app>
   <resource type="text/css" src="home.css"/>
@@ -29,7 +29,7 @@
 
 示例 CSS 文件内容：
 
-```css title=home.css
+```css title="home.css"
 root {
   background-color: #f6f8fa;
 }
@@ -43,7 +43,7 @@ root {
 
 执行 `lcui compile home.xml` 命令后，生成 `home.xml.h` 文件：
 
-```c title=home.xml.h
+```c title="home.xml.h"
 /** This file is generated from home.xml */
 
 #include <ui.h>

docs/rfc/lcui-cli/0003-yaml-compiler.md

@@ -13,7 +13,7 @@
 
 示例 XML 文件内容：
 
-```yml title=home.yml
+```yml title="home.yml"
 name: lcui-app
 children:
   - name: resource
@@ -51,7 +51,7 @@ children:
 
 示例 CSS 文件内容：
 
-```css title=home.css
+```css title="home.css"
 root {
   background-color: #f6f8fa;
 }
@@ -65,7 +65,7 @@ root {
 
 执行 `lcui compile home.yml` 命令后，生成 `home.yml.h` 文件：
 
-```c title=home.yml.h
+```c title="home.yml.h"
 /** This file is generated from home.yml */
 
 #include <ui.h>

docs/rfc/lcui-cli/0004-css-compiler.md

@@ -13,7 +13,7 @@
 
 示例 CSS 文件内容：
 
-```css title=home.css
+```css title="home.css"
 root {
   background-color: #f6f8fa;
 }
@@ -27,7 +27,7 @@ root {
 
 执行 `lcui compile home.css` 命令后，生成 `home.css.h` 文件：
 
-```c title=home.yml.h
+```c title="home.yml.h"
 static const char *css_str_0 = "\
 root {\
   background-color: #f6f8fa;\

docs/rfc/lcui-cli/0005-sass-compiler.md

@@ -13,7 +13,7 @@
 
 示例 SCSS 文件内容：
 
-```scss title=home.scss
+```scss title="home.scss"
 $bg: #f6f8fa;
 $color: #28a745;
 
@@ -30,7 +30,7 @@ root {
 
 执行 `lcui compile home.scss` 命令后，生成 `home.scss.h` 文件：
 
-```c title=home.yml.h
+```c title="home.yml.h"
 static const char *css_str_0 = "\
 root {\
   background-color: #f6f8fa;\

docs/rfc/lcui-cli/0007-react-tsx-compiler.md

@@ -13,7 +13,7 @@
 
 示例 tsx 文件内容：
 
-```tsx title=home.tsx
+```tsx title="home.tsx"
 import React from "react";
 import styles from "./home.module.css";
 
@@ -29,7 +29,7 @@ export default function Home() {
 
 示例 CSS 文件内容：
 
-```css title=home.module.css
+```css title="home.module.css"
 :global(.home) {
   padding: 20px;
 }
@@ -49,7 +49,7 @@ export default function Home() {
 
 执行 `lcui compile home.tsx` 命令后，生成 `home.tsx.h` 文件：
 
-```c title=home.tsx.h
+```c title="home.tsx.h"
 /** This file is generated from home.tsx */
 
 #include <ui.h>