chore(Base): 🤖 change all blogs code block

LuckyFBB · Jan 24, 2025 · e5b6b7b · e5b6b7b
1 parent e04d327
commit e5b6b7b
Show file tree

Hide file tree

Showing 30 changed files with 727 additions and 1,127 deletions.
diff --git a/docs/Engineering/Base-babel.md b/docs/Engineering/Base-babel.md
@@ -6,23 +6,6 @@ group:
 order: 0
 ---
 
-<style>
-    .link {
-        margin-top: 16px;
-        padding: 4px 12px 4px 10px;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #F8CBA6;
-        background-color: #FFFBEB;
-    }
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 babel 的原名叫 6to5，简明扼要就是 es6 转 es5，但是没想到 es 标准推进的过快，短时间就有了 es7/8，所以它改名为 babel
 
 <!-- more -->

diff --git a/docs/Engineering/Base-swc.md b/docs/Engineering/Base-swc.md
@@ -6,30 +6,6 @@ group:
 order: 0
 ---
 
-<style>
-    .link {
-        margin-top: 16px;
-        padding: 4px 12px 4px 10px;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #F8CBA6;
-        background-color: #FFFBEB;
-    }
-    .foreword{
-        padding: 12px 12px 12px 16px;
-        background-color: #ECF9FF;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #439dd3;
-    }
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 <div class="foreword">随着在编译中越来越卷，SWC 由于速度极快也出现在大众的视野中，本文会简单介绍一下 SWC。<a href="/engineering/base-babel">前文</a>中有对 Babel 做相关介绍，大家可以一起阅读。</div>
 
 ## SWC 是什么？

diff --git a/docs/Engineering/Comparison-between-babel-plugin-and-eslint-plugin.md b/docs/Engineering/Comparison-between-babel-plugin-and-eslint-plugin.md
@@ -6,17 +6,6 @@ group:
 order: 1
 ---
 
-<style>
-    .link {
-        margin-top: 16px;
-        padding: 4px 12px 4px 10px;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #F8CBA6;
-        background-color: #FFFBEB;
-    }
-</style>
-
 babel 和 eslint 都是我们项目中常用的工具，两者都是基于 AST 去扩展的，前者做代码的转换，后者做错误检查和修复。两者都能够做到分析和转换代码。所以两者有啥不同呢？
 
 ## babel 插件

diff --git a/docs/Engineering/Intl-messageformat.md b/docs/Engineering/Intl-messageformat.md
@@ -6,15 +6,6 @@ group:
 order: 0
 ---
 
-<style>
-    .quote {
-        background-color: #f9f1db;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 <div class="quote">Formats ICU Message strings with number, date, plural, and select placeholders to create localized messages.</div>
 
 ## ICU 信息语法

diff --git a/docs/Engineering/Pnpm-package-management-that-I-know.md b/docs/Engineering/Pnpm-package-management-that-I-know.md
@@ -6,30 +6,6 @@ group:
 order: 1
 ---
 
-<style>
-    .link {
-        margin-top: 16px;
-        padding: 4px 12px 4px 10px;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #F8CBA6;
-        background-color: #FFFBEB;
-    }
-    .foreword{
-        padding: 12px 12px 12px 16px;
-        background-color: #ECF9FF;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #439dd3;
-    }
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 在依赖包盛行的今天，安装包的方式也是多种多样的，从 npm->yarn->pnpm，每一次的升级都带来着不一样的便利，这篇文章将从 npm2 开始，剖析到现在火热的 pnpm。
 
 <!-- more -->

diff --git a/docs/Engineering/Understanding-package.md b/docs/Engineering/Understanding-package.md
@@ -6,15 +6,6 @@ group:
 order: 0
 ---
 
-<style>
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 ## npm 中的依赖包
 
 ### 依赖包类型

diff --git a/docs/Engineering/Webpack-hmr.md b/docs/Engineering/Webpack-hmr.md
@@ -6,15 +6,6 @@ group:
 order: 4
 ---
 
-<style>
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 ## 何为 HMR?
 
 模块热替换(HMR - Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面
@@ -344,67 +335,73 @@ if (this.options.hot) {
 
 上述知道了 module.hot.check 的来源，现在看看该[`check`](https://github.com/webpack/webpack/blob/main/lib/hmr/HotModuleReplacement.runtime.js#L258)函数具体做了什么事情
 
-- 调用`$hmrDownloadManifest$`获取当前的`hash.hot-update.json`
-  ```js
-  // $hmrDownloadManifest$ 都是动态注入的代码
-  __webpack_require__.hmrM = () => {
-    if (typeof fetch === 'undefined')
-      throw new Error('No browser support: need fetch API');
-    return fetch(__webpack_require__.p + __webpack_require__.hmrF()).then(
-      (response) => {
-        if (response.status === 404) return;
-
-        if (!response.ok)
-          throw new Error(
-            'Failed to fetch update manifest ' + response.statusText,
-          );
-
-        return response.json();
-      },
-    );
-  };
-  __webpack_require__.hmrF = () =>
-    'main.' + __webpack_require__.h() + '.hot-update.json';
-  ```
-- 再调用`$hmrDownloadUpdateHandlers$["jsonp"]`请求`js`文件
-  ```js
-  // 执行 loadUpdateChunk
-  __webpack_require__.hu = (chunkId) => {
-    return '' + chunkId + '.' + __webpack_require__.h() + '.hot-update.js';
-  };
-
-  // __webpack_require__.l 中创建 script 标签下载 hash.hot-update.js
-  ```
+#### 调用`$hmrDownloadManifest$`获取当前的`hash.hot-update.json`
+
+```js
+// $hmrDownloadManifest$ 都是动态注入的代码
+__webpack_require__.hmrM = () => {
+  if (typeof fetch === 'undefined')
+    throw new Error('No browser support: need fetch API');
+  return fetch(__webpack_require__.p + __webpack_require__.hmrF()).then(
+    (response) => {
+      if (response.status === 404) return;
+
+      if (!response.ok)
+        throw new Error(
+          'Failed to fetch update manifest ' + response.statusText,
+        );
+
+      return response.json();
+    },
+  );
+};
+__webpack_require__.hmrF = () =>
+  'main.' + __webpack_require__.h() + '.hot-update.json';
+```
+
+#### 再调用`$hmrDownloadUpdateHandlers$["jsonp"]`请求`js`文件
+
+```js
+// 执行 loadUpdateChunk
+__webpack_require__.hu = (chunkId) => {
+  return '' + chunkId + '.' + __webpack_require__.h() + '.hot-update.js';
+};
+
+// __webpack_require__.l 中创建 script 标签下载 hash.hot-update.js
+```
 
 ### apply
 
 终于到了最后一步热更新的操作，所有的代码逻辑都在[`internalApply`](https://github.com/webpack/webpack/blob/main/lib/hmr/HotModuleReplacement.runtime.js#L319)中
 
-- 删除过期的模块
-  ```js
-  var queue = outdatedModules.slice();
-  while (queue.length > 0) {
-    moduleId = queue.pop();
-    // 从缓存中删除过期的模块
-    module = installedModules[moduleId];
-    // 删除过期的依赖
-    delete outdatedDependencies[moduleId];
-  }
-  ```
-- 将新的模块添加到更新列表，**webpack_require**执行相关模块的代码
+#### 删除过期的模块
 
-  ```js
-  appliedUpdate[moduleId] = newModuleFactory;
+```js
+var queue = outdatedModules.slice();
+while (queue.length > 0) {
+  moduleId = queue.pop();
+  // 从缓存中删除过期的模块
+  module = installedModules[moduleId];
+  // 删除过期的依赖
+  delete outdatedDependencies[moduleId];
+}
+```
 
-  for (var updateModuleId in appliedUpdate) {
-    if (__webpack_require__.o(appliedUpdate, updateModuleId)) {
-      __webpack_require__.m[updateModuleId] = appliedUpdate[updateModuleId];
-    }
+#### 将新的模块添加到更新列表，**webpack_require**执行相关模块的代码
+
+```js
+appliedUpdate[moduleId] = newModuleFactory;
+
+for (var updateModuleId in appliedUpdate) {
+  if (__webpack_require__.o(appliedUpdate, updateModuleId)) {
+    __webpack_require__.m[updateModuleId] = appliedUpdate[updateModuleId];
   }
-  ```
+}
+```
+
+#### 执行`hot._acceptedDependencies`的`callback`
 
-- 执行`hot._acceptedDependencies`的`callback`
-  ![image.png](/blog/imgs/webpackHmr/image%209.png)
+![image.png](/blog/imgs/webpackHmr/image%209.png)
 
 ## 总结
 

diff --git a/docs/Engineering/Webpack-loader.md b/docs/Engineering/Webpack-loader.md
@@ -6,15 +6,6 @@ group:
 order: 1
 ---
 
-<style>
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 ## 前言
 
 webpack 有两种扩展方式。一种是 Loader 主要是负责将其他的资源形态转译成 webpack 可以处理的标准 JavaScript 代码；另一种是 Plugin 主要伴随着 webpack 整个生命周期，做一些重塑逻辑。

diff --git a/docs/Engineering/Webpack-splitChunk.md b/docs/Engineering/Webpack-splitChunk.md
@@ -6,15 +6,6 @@ group:
 order: 5
 ---
 
-<style>
-    .quote {
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 ## 理解 chunk
 
 `Webpack`可以看成一个模块打包机器，我们编写的文件对于`Webpack`来说都是模块(`module`)，我们可以在`Webpack`中配置对应模块的处理方式。

diff --git a/docs/More/Memory-read-note.md b/docs/More/Memory-read-note.md
@@ -6,14 +6,6 @@ group:
 order: 5
 ---
 
-<style>
-    .quote {
-        background-color: #f9f1db;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
 <div class="quote">📨 此文转载来源于景明</div>
 
 内存（RAM）是计算机中一种需要认真管理的重要资源。就目前来说，虽然一台普通家用计算机的内存容量已经是 20 世纪 60 年代早期全球最大的计算机 IBM 7094 的内存容量的 10000 倍以上，但是程序大小的增长速度比内存容量的增长速度要快得多。正如帕金森定律所指出的：“不管存储器有多大，程序都可以把它填满”。

diff --git a/docs/More/MsgShare-and-memory.md b/docs/More/MsgShare-and-memory.md
@@ -6,17 +6,6 @@ group:
 order: 2
 ---
 
-<style>
-    .link {
-        margin-top: 16px;
-        padding: 4px 12px 4px 10px;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #F8CBA6;
-        background-color: #FFFBEB;
-    }
-</style>
-
 ## 消息队列
 
 消息队列是在两个不相关进程间传递数据的一种简单、高效的方式，其独立于发送进程 、接收进程存在。

diff --git a/docs/More/Process-read-notes.md b/docs/More/Process-read-notes.md
@@ -6,10 +6,6 @@ group:
 order: 0
 ---
 
-<style>
-    .color{color: #4384b5}
-</style>
-
 ## 并发和并行的区别
 
 <img width="700" alt="image" src="https://user-images.githubusercontent.com/38368040/201523710-c349412a-fac3-445f-9dd0-7eec08f49842.png">

diff --git a/docs/More/SSE.md b/docs/More/SSE.md
@@ -6,24 +6,6 @@ group:
 order: 3
 ---
 
-<style>
-    .link {
-        margin-top: 16px;
-        padding: 4px 12px 4px 10px;
-        border-top-right-radius: 8px;
-        border-bottom-right-radius: 8px;
-        border-left: 5px solid #F8CBA6;
-        background-color: #FFFBEB;
-    }
-    .quote {
-        display: flex;
-        background-color: #FFE7CC;
-        padding: 10px;
-        border-radius: 8px;
-        font-weight: 500;
-    }
-</style>
-
 ## 前言
 
 随着 ChatGPT 的流行，SSE(Server Send Event) 这种请求方式也进入大众的视野。