言

markdown是啥，相信大家都已經清楚了，一種程序員必備的文檔格式。可以支持代碼高亮，表格，圖片，視頻等一種文檔格式

但是在vue3中如何來解析markdown文件呢？

效果

在效果圖中，通過請求獲取markdown源文件，然后解析成正常的html展示在頁面上

當前效果可以查看在線文檔

實現方式

咱們可以將整個解析markdwon文件到html的整個過程拆分成以下幾個步驟：

1. 獲取markdown源文件
2. markdown轉換成html
3. 美化樣式

獲取markdown內容

markdown.md是一個文件，那么如何獲取markdonw里面的內容呢？

在進行第一步的時候，我想提出一個問題，請問你是如何獲取本地json文件內容的？ 通過問題轉換，大家肯定就知道如何獲取本地json內容了——通過fetch來獲取嘛

那么咱們可以寫出這樣的代碼：

fetch('./xxxx.json', {
            method: 'GET',
            mode: 'cors' // 允許發送跨域請求
        }).then(function (response) {
                //打印返回的json數據
                response.json().then(function (data) {
                   // 獲取到json文件的內容
                })
            })
            .catch(function (e) {
               // 失敗后的異常處理
            })
復制代碼

既然獲取json可以這么來，那么獲取markdown.md是不是也可以這么來呢？

同理，咱們也可以這么來試一試，但是這里肯定有一個地方需要進行修改，那就是response.json()，markdown文件里面返回的肯定不是一個json文件，而是一個正常的文本，那么可以寫出以下代碼：

fetch(route.query.path as string, {
        method: 'GET',
        mode: 'cors', // 允許發送跨域請求
        credentials: 'include',
        headers: {
            'Content-Type': 'text/plain'
        }
    })
        .then(async function (response) {
            //打印返回的json數據
            response.text().then((data)=> {
               // 獲取到markdown內容
            })
        })
        .catch(function (e) {
            // 獲取失敗的異常捕獲
        })
復制代碼

效果如圖

解析成html

拿到markdown的內容后，那就需要進行解析成正常的html了,那么這一步怎么做呢？

安裝解析markdown語法的包：

npm install marked -S
復制代碼

有關marked的介紹如下：

簡單點的說是：

• 為速度而生
• 低級編譯器，用于解析無緩存或長時間阻塞的標記
• 輕量級，同時實現所有的降價功能從支持的口味和規格
• 在瀏覽器、服務器或命令行界面(CLI)中工作

當然，該包也提供了在線demo：demo page

使用方式如下：

import { marked } from 'marked'

// marked 選項
marked.setOptions({
    pedantic: false,
    gfm: true,
    breaks: false,
    sanitize: false,
    smartLists: true,
    smartypants: false,
    xhtml: false,
})

const htmlStr=marked('markdown 內容')
復制代碼

有了這一步，頁面的html就出來了，可以看到如下的效果：

美化代碼

經過上面兩步，初步的html內容就渲染出來了，但是這樣的效果，有讀者愿意看么？

接下來咱們來美化一下咱們的代碼，美化代碼的方式有以下幾種：

1. 引用現場的css
2. 自己手動來實現css

美化就是缺少css嘛

在這里，咱們就來實現一個github的markdown的樣式吧

github的markdown css文件已經有現成的庫了，咱們只需要按照一下即可：

npm install github-markdown-css
復制代碼

有了這個，咱們就好辦了，改造一下代碼：

import 'github-markdown-css'
復制代碼

對的，就是這么簡單，只需要導入這個包即可，就可以實現以下效果：

番外

說了這么多，需要給大家發一波福利??，優秀的你知道如何美化代碼格式么？

#34;夏哉ke"：quangneng.com/5046/

要手寫一個微信小程序的底層框架，你需要掌握一系列的前端和后端技術。下面是一個概覽，包括一些必須掌握的通用技術：

1. JavaScript（JS）：
2. 熟練掌握JS是開發小程序的基礎，包括ES6+的新特性，如箭頭函數、Promise、async/await等。
3. WXML（微信小程序標記語言）：
4. 類似于HTML，是構建小程序頁面的標記語言，需要熟悉其語法和組件。
5. WXSS（微信小程序樣式表）：
6. 類似于CSS，用于美化小程序的頁面，需要掌握其選擇器、布局和樣式繼承等特性。
7. 小程序框架：
8. 微信小程序的官方框架提供了豐富的API和組件，包括視圖層和邏輯層的分離，狀態管理等。
9. 后端技術：
10. Node.js：可能會用于開發服務器端，處理小程序的數據請求。
11. 數據庫技術：如MySQL、MongoDB等，用于存儲和管理數據。
12. 網絡請求：
13. 掌握使用微信小程序的wx.request進行網絡請求，以及處理HTTP請求的細節。
14. 前端構建工具：
15. 如Webpack、Gulp等，用于優化和打包小程序的代碼。
16. 版本控制：
17. 使用Git進行代碼的版本控制和管理。
18. 性能優化：
19. 掌握前端性能優化的基本策略，如代碼分割、懶加載、緩存使用等。
20. 安全知識：
21. 了解Web安全的基本概念，如XSS、CSRF等，并采取相應的防護措施。
22. 用戶體驗（UX）和用戶界面（UI）設計：
23. 雖然不直接涉及編碼，但對于創建用戶友好的小程序至關重要。
24. 模塊化和組件化思維：
25. 將小程序的代碼分割為可復用的模塊和組件，提高開發效率和代碼的可維護性。
26. 跨平臺開發能力：
27. 雖然專注于微信小程序，但了解如何將應用拓展到其他平臺（如支付寶小程序、百度智能小程序等）也是有益的。

掌握上述技術將有助于你從零開始構建一個微信小程序的底層框架。此外，還需要不斷關注微信官方的更新和社區的最新動態，以適應小程序平臺的最新發展。

小程序框架有哪些常用組件？

微信小程序框架提供了一系列的常用組件，用于構建用戶界面。以下是一些常用的組件：

1. 視圖容器：
2. view：視圖容器，類似于HTML中的div。
3. scroll-view：可滾動視圖區域。
4. swiper：滑塊視圖容器，用于輪播圖等。
5. 基礎內容：
6. text：文本組件，類似于HTML中的span。
7. rich-text：富文本組件，可以渲染HTML字符串。
8. 表單組件：
9. button：按鈕。
10. input：輸入框。
11. checkbox：復選框。
12. radio：單選框。
13. form：表單，用于提交數據。
14. 導航：
15. navigator：頁面鏈接，用于跳轉到其他頁面或小程序。
16. 媒體組件：
17. image：圖片。
18. audio：音頻。
19. video：視頻。
20. 地圖：
21. map：地圖組件，用于展示地圖和標記點。
22. 畫布：
23. canvas：畫布組件，用于繪制圖形和動畫。
24. 開放能力：
25. open-data：用于展示微信用戶的數據，如用戶昵稱、頭像等。
26. official-account：公眾號組件，用于展示公眾號的信息。
27. 導航欄：
28. navigation-bar：自定義導航欄。
29. 頁面屬性：
30. page-container：用于定義頁面內容容器。
31. 標簽欄：
32. tab-bar：自定義標簽欄。
33. 對話框：
34. modal：模態對話框。
35. 進度條：
36. progress：進度條。
37. 動作面板：
38. action-sheet：動作面板，用于顯示一系列動作選項。
39. 滑動操作：
40. movable-view：可移動的視圖容器，通常用于實現拖拽效果。
41. 通知欄：
42. toast：輕量級提示框，用于顯示簡短的消息。
43. loading：加載提示。

這些組件是構建微信小程序用戶界面的基礎，通過組合使用這些組件，可以實現豐富的功能和界面效果。微信官方文檔中提供了每個組件的詳細屬性和用法，建議在開發過程中參考官方文檔以獲取最新的信息和指導。

之前也有寫過 CSS 優惠券樣式《CSS3徑向漸變實現優惠券波浪造型》，這次再來溫習一遍，并且將更為詳細的講解，從布局到具體樣式說明，最后定義 CSS 變量，自定義主題顏色。

布局

布局 其實是學習前端的重要部分，最常用的方式就是從上而下、從左而右、亦或者兩個相結合。

看上圖，而這里，我們就只是最簡單的布局方式，從上而下：

1、優惠券金額和過期時間

2、優惠券描述

3、按鈕（其實按鈕也可以放到“2”里面去）

這樣分析，我們就有了 html 架構了

<div class="coupon">
  <!-- 1、優惠券金額和過期時間 -->
  <div class="price">
    100元
    <span>優惠券</span>
    <p class="timeout">2020-12-31 18:18:18過期</p>
  </div>

  <!-- 2、優惠券描述 -->
  <div class="describe">
    <p>1、商城、美食可用</p>
    <p>2、過期作廢</p>
  </div>

  <!-- 3、按鈕 -->
  <div class="btns">
    <button>立即使用</button>
  </div>
</div>

CSS修飾

接下來我們用 CSS 美化我們的 html 。同理，我們也根據布局分步進行樣式書寫。

1、優惠券金額和過期時間樣式

這里的核心就是上方的凹槽和下方的鋸齒

.coupon{
  background-color: #E0E0E0;
  width: 200px;
  /* css變量 */
  --main-color: #EC407A;
  --f-color: #444;
}
.price {
  position: relative;
  height: 120px;
  background-image: radial-gradient(
      circle at 100px -8px, #fff 20px, var(--main-color) 21px
  );
  color: #fff;
  font-size: 20px;
  text-align: center;
  padding-top: 40px;
}
.price .timeout{
  color: var(--f-color);
  font-size: 14px;
  margin-top: 25px;
}
.price span{
  font-size: 14px;
}

這里用到了 徑向漸變，不清楚用法的小伙伴可以看看語法：

background-image: radial-gradient(shape size at position, start-color, ..., last-color);

注釋：

（1）、shape 確定圓的類型:

ellipse (默認): 指定橢圓形的徑向漸變。

circle ：指定圓形的徑向漸變

（2）、size 定義漸變的大小，可能值：

farthest-corner (默認) : 指定徑向漸變的半徑長度為從圓心到離圓心最遠的角

closest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最近的邊

closest-corner ： 指定徑向漸變的半徑長度為從圓心到離圓心最近的角

farthest-side ：指定徑向漸變的半徑長度為從圓心到離圓心最遠的邊

（3）、position 定義漸變的位置。可能值：

center（默認）：設置中間為徑向漸變圓心的縱坐標值。

top：設置頂部為徑向漸變圓心的縱坐標值。

bottom：設置底部為徑向漸變圓心的縱坐標值。

（4）、start-color, ..., last-color 用于指定漸變的起止顏色。

這樣價格上方的凹槽就有了，接下來下方的鋸齒我們也可以用 徑向漸變 的方式實現：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: 0px;
  height: 10px;
  width: 100%;
  /* background-size: 11px 200px; */
  background-image: 
    radial-gradient(
    circle at 5px 10px, 
    #E0E0E0 6px, 
    var(--main-color) 7px);
}

偽類元素 ::after 設置徑向漸變背景為一個圓，后進行平鋪就形成了鋸齒，調整位置。

其實還有更簡單的方法，可以直接用一個虛線邊框即可搞定，請看：

.price::after{
  position: absolute;
  content: '';
  display: block;
  bottom: -5px;
  width: 100%;
  border-bottom: 10px dotted #E0E0E0;
}

當然也有缺陷，間隔位置不好控制

2、優惠券描述與按鈕 優惠券核心鋸齒已經搞定了，下面都是小菜啦，非常簡單咯

.describe{
  color: #333;
  padding: 10px;
  font-size: 14px;
}
.btns {
  /* 使其button可以居中 */
  text-align: center;
}
.btns button{
  /* 重置按鈕樣式 */
  border: none;
  box-shadow: none;
  outline: none;

  background-color: var(--main-color);
  color: #fff;
  width: 50%;
  border-radius: 20px;
  line-height: 30px;
  margin: 40px 0 20px;
  cursor: pointer;
}

主題顏色

大家都看到了，我們上方代碼主要顏色都采用的變量，而且變量是定義在 .coupon 類選擇器里面的。這樣的原因是：

1、CSS變量作用域（CSS變量只能作用于自身以及后代元素。兄弟元素，祖先元素都不能享用。）

2、方便主題使用

ok，我們就可以copy 多個 優惠券，并給每個添加一個不同的 class，比如下方的 theme1、theme2、theme3

<div class="coupon theme1">
  ...
</div>
<div class="coupon theme2">
  ...
</div>
<div class="coupon theme3">
  ...
</div>
<div class="coupon">
  ...
</div>

接下來我們就為不同主題定義不同的顏色變量

.coupon.theme1{
  --main-color: #8E24AA;
  --f-color: #fff;
}

.coupon.theme2{
  --main-color: #039BE5;
  --f-color: #fff;
}

.coupon.theme3{
  --main-color: #26A69A;
  --f-color: #fff;
}

這樣，theme1主題下的優惠券，就是紫色主題，theme2主題下的優惠券，就是藍色主題...，而默認主題顏色就是我們 .coupon 類選擇器里面的定義的變量顏色（紅色）。

小結

今天你學到了嗎？從布局分析到具體實現，再到主題顏色，相信小伙伴們都各有所得。