言

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 类选择器里面的定义的变量颜色（红色）。

小结

今天你学到了吗？从布局分析到具体实现，再到主题颜色，相信小伙伴们都各有所得。