Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >基于 Taro 的微信小程序开发实战:如何支持高亮代码块

基于 Taro 的微信小程序开发实战:如何支持高亮代码块

作者头像
用户6901603
发布于 2024-04-19 03:10:50
发布于 2024-04-19 03:10:50
47900
代码可运行
举报
文章被收录于专栏:不知非攻不知非攻
运行总次数:0
代码可运行

如果我们想要开发一款程序员使用的社区小程序,那么对 markdown 格式的解析与渲染是一个非常重要的功能。不过要完善的支持 .md 格式,在微信小程序中并不是一件容易的事情。好在微信小程序目前已经支持 html 标签渲染,因此我们有许多的 web 方案可以借鉴。

我实现的最终的效果如上图所示。引入成功,并且在真机测试通过。接下来具体跟大家分享一下实现步骤。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
// 我的开发环境
Taro 3.6.6
Node 16.19.1

0

支持引入 .md 文件

正常情况下,我们应该从接口中获取到当前文件的 markdown 内容,不过偶尔也需要支持本地 .md 文件的渲染,因此首先我们要在工程里支持引入 .md 文件

首先支持如下操作,引入 raw-loader

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
pnpm add raw-loader

然后在工程配置文件中 config/index.ts 新增如下配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
module.exports = {
  // ...
  mini: {
    // ...
    webpackChain(chain, webpack) {
      chain.merge({
        module: {
          rule: {
            myloader: {
              test: /\.md$/,
              use: [
                {
                  loader: 'raw-loader',
                  options: {},
                },
              ],
            },
          },
        },
      })
    },
  },
}

由于我的项目中使用了 ts,因此直接引入 .md 文件还会报错。

types/global.d.ts 中,新增 md 文件的配置即可解决该问题。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
...
declare module '*.scss';
declare module '*.sass';
declare module '*.styl';
+ declare module '*.md';

1

引入 markdown 解析器

我使用了一款名为 wemark 的 Markdown 渲染库。不过由于年久失修,如果按照该作者的方式直接使用的话会有一些问题。因此请尽量按照我的步骤来在项目中配置

1、首先我们需要下载该项目

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
git clone https://github.com/TooBug/wemark.git

2、然后将该项目中的文件 wemark 复制到 Taro 项目中 src 目录中。

3、设置编译时复制 wemark 目录。修改 config/index.ts,在 copy 设置项中增加 wemark

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
copy: {
  patterns: [
    {
      from: 'src/wemark',
      to: 'dist/wemark',
    },
  ],
  options: {}
},

我们可以通过如下方式在页面中引入 wemark,创建页面时,我们会创建一个 index.config.ts 的文件,使用 usingComponents 配置好

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
export default definePageConfig({
  navigationBarTitleText: '代码块高亮',
  navigationStyle: 'default',
  usingComponents: {
    wemark: '../../wemark/wemark'
  }
})

这样我们可以直接在页面中使用

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
import { View } from '@tarojs/components'
import code from './code.md'
import './index.scss'

function Parse() {
  return (
    <View>
      <wemark md={code} link highlight type='wemark' />
    </View>    
  )
}

export default Parse

我们可以在 src/wemark/wemark.wxss 中,修改渲染之后的样式。

调整好之后,样式如下

目前已基本完成,但是字体有点不好看,因此我们需要引入一个专门用来展示代码的等宽字体,这里我们引入的是 SF Mono

2

引入自定义字体

在微信小程序中引入自定义字体也并非易事。

我们可以使用它官方文档中提供的方案通过网络地址来引入。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
wx.loadFontFace({
  family: 'FZSuXSLSJW',
  source: 'url("https://we7.stuyun.com/FZSuXSLSJW.ttf")',
  success: res => {
    console.log('font load success', res)
  },
  fail: err => {
    console.log('font load fail', err)
  }
})

但是这种方案有一些不太爽的限制,该地址必须与小程序同源,或者设置了可以跨域访问。并且不支持本地的字体文件。

因此我们只能通过把字体文件转成 base64 的格式,然后通过 @font-face 来自定义字体。

transfonter.org 可以免费的帮助我们将字体文件转换成 base64

拿到对应字体的 base64 之后,然后自定义样式即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
@font-face {
  font-family: 'SFMono';
  src: url('data:font/ttf;charset=utf-8;base64,AAEAAAANAIAAAwBQRkZUTYhof28AAoBMAAAAHE....
}

最后,在src/wemark/wemark.wxss 中,给代码块设置样式属性

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
.wemark_block_code{
  font-family: SFMono;
  ...
}

搞定!

3

按需加载

微信小程序对包体积有严格的限制。这样处理之后,包体积可能会有点大。字体文件有接近 200k,remark 也不小。因此我们还需要进一步做优化

仔细观察 wemark 文件,我们发现他其实是基于 remark 实现的一个自定义小程序组件。

因此,我们可以把自定义字体的样式写在 wemark.wxss 中,然后将该组件设置为按需引入,那么在小程序启动时,就可以不用加载该组件。

微信小程序目前已经支持了按需引入。在 wemark.json 中,添加如下配置

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
{
  "lazyCodeLoading": "requiredComponents"
}

4

总结

因为微信小程序现在已经支持 html 标签的渲染,因此我们有很多在 web 上能使用的方案也能运用于小程序中,但是由于微信小程序对打包体积有限制,因此,功能验证成功之后,要多考虑这方面的问题。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2024-04-19,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 这波能反杀 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
猿创征文 | 三款Python学习开发任选工具&两款数据库工具
为什么推荐社区版本呢,因为PyCharm Community为咱们普通学习以及开发人员几乎开放了所有功能,这个版本可以支持我们平时的所有操作,所以很推荐使用这个版本。我基本上就使用这个版本,而且提示内容也方便操作。
红目香薰
2022/11/30
3830
猿创征文 | 三款Python学习开发任选工具&两款数据库工具
看完这个,还不会【Python爬虫环境】,请你吃瓜
注:这里如果没有选系统的位置的话就得在项目中单独下载对应的库,下面我给了示例,如果不在乎的话是无所谓的最多再下载一遍也能用。
红目香薰
2023/01/13
5520
看完这个,还不会【Python爬虫环境】,请你吃瓜
世界杯——手动为梅西标名
我们使用的是Python语言,使用了Image包用作图片处理,matplotlib包用作坐标查阅,这个坐标还是很好看的,一目了然的X,Y轴。还有使用uuid来随机创建文件名称。
红目香薰
2022/12/05
4120
世界杯——手动为梅西标名
最长情的告白就是陪伴【Python七夕祝福】——那些浪漫的开始
七夕来袭!是时候展现专属于程序员的浪漫了!你打算怎么给心爱的人表达爱意?鲜花礼物?代码表白?还是创意DIY?或者…无论那种形式,快来秀我们一脸吧! 参与发布文章即可获得【话题达人】勋章,参与多个话题还可进行勋章升级喔!
红目香薰
2022/11/30
2580
最长情的告白就是陪伴【Python七夕祝福】——那些浪漫的开始
Python可视化数据分析09、MySQL读写
Python可视化数据分析09、MySQL读写 📋前言📋 💝博客:【红目香薰的博客_CSDN博客-计算机理论,2022年蓝桥杯,MySQL领域博主】💝 ✍本文由在下【红目香薰】原创,首发于CSDN✍ 🤗2022年最大愿望:【服务百万技术人次】🤗 💝Python初始环境地址:【Python可视化数据分析01、python环境搭建】💝  ---- 环境需求 环境:win10 开发工具:PyCharm Community Edition 2021.2 数据库:MySQL5.6 目录
红目香薰
2022/11/30
3720
Python可视化数据分析09、MySQL读写
Python可视化数据分析01、python环境搭建
下载地址:Download PyCharm: Python IDE for Professional Developers by JetBrains
红目香薰
2022/11/30
3620
Python可视化数据分析01、python环境搭建
Linux CentOS安装Python全过程
3、安装wget,需要使用wget下载对应的python包,我python包选择的3.8的包。
红目香薰
2022/11/30
1.9K0
Linux CentOS安装Python全过程
走过岁月我才发现——云IDE真方便(Python3.8环境测试)
官方有IDE的产品介绍与IDE的使用教程,我先进行测试一下。在下面的文章有测试效果:
红目香薰
2022/11/30
3260
走过岁月我才发现——云IDE真方便(Python3.8环境测试)
Python考核内容
目标网站: https://www.51moot.net/main/course?search_id=0&is_free=-1&page_index=0 前置环境需求 pip3 config set
红目香薰
2022/11/30
3000
Python考核内容
猿创征文|Python基础——Visual Studio版本——DBHelper-MySQL版本
Python基础——Visual Studio版本——DBHelper-MySQL版本 前言 本节内容为方便大家复制,所有内容都写在了引用模块。 环境要求 pip3 config set global.index-url https://repo.huaweicloud.com/repository/pypi/simple pip3 config list pip3 install --upgrade pip pip3 install pymysql DBHelper源码 import p
红目香薰
2022/11/30
3310
猿创征文|Python基础——Visual Studio版本——DBHelper-MySQL版本
机器学习筑基篇,​Ubuntu 24.04 编译安装 Python 及多版本切换
描述:说到机器学习,人工智能,深度学习不免会提到Python这一门编程语言(人生苦短,及时Python),Python是一门解释型、面向对象、动态数据类型的高级程序设计语言,使用Python可以非常便利的处理各种数据。
全栈工程师修炼指南
2024/07/16
2.2K0
机器学习筑基篇,​Ubuntu 24.04 编译安装 Python 及多版本切换
pip清华源安装_pip3换源
pip install –target=~/anaconda3/envs/my_envs/lib/python3.6/site-packages opencv-python==4.2.0.34 -i https://pypi.doubanio.com/simple
全栈程序员站长
2022/11/01
3.9K1
pypi pip 清华源使用帮助
https://mirrors.tuna.tsinghua.edu.cn/help/pypi/
卓越笔记
2023/02/18
3.7K0
Tensorflow
##################################################################
Dean0731
2020/05/08
7500
2025最新 pip install 国内可用镜像源仓库地址(01月01日更新)
在 Python 开发 中,无论是安装常用库如 numpy、pandas,还是下载 AI 框架如 TensorFlow、PyTorch,使用 pip 时经常遇到下载速度慢、连接超时甚至失败的问题。这些问题在国内尤为突出,原因是国内与官方 PyPI 仓库的网络延迟较高。为了解决这个痛点,选择高效、稳定的 pip 国内镜像源 是提高开发效率的关键。🎉 本篇文章为大家带来 2025年1月最新 pip 国内可用镜像源仓库地址,包括清华大学、阿里云、腾讯云等顶级国内镜像源,详细介绍其配置方法与常见问题解答,助力您的 Python 开发之旅更加顺畅!💻
猫头虎
2025/01/03
12.9K0
pip镜像源配置,pip使用国内镜像源, pip禁用国外源,pip源配置
默认情况下 pip 使用的是国外的镜像,在下载的时候速度非常慢,本文我们介绍使用国内清华大学的源,地址为:
高久峰
2023/06/20
1.5K0
ubuntu build install python3.12 and config pip
eisc
2024/07/22
3890
pip基本命令和使用
pip是一个Python的包管理器,它允许你方便地安装、升级和删除Python库和工具。通过pip,你可以从Python Package Index(PyPI)中获取成千上万的第三方软件包,并将其安装到你的Python环境中。pip提供了简洁的命令行界面,使得管理Python包变得轻松和一致。它是Python生态系统中不可或缺的一部分,广泛应用于数据科学、Web开发、自然语言处理等领域。
红目香薰
2023/12/09
8050
pip基本命令和使用
python pip国内镜像安装方法以及pycharm换源
pip config set global.index-url https://pypi.tuna.tsinghua.edu.cn/simple
SingYi
2022/07/13
2.5K0
python pip国内镜像安装方法以及pycharm换源
python使用pip
两者的结果对于之后的时代而言,应该是没有区别的。毕竟python2已经结束了它的历史使命。我的系统执行这两条命令的结果是一样的。
zy010101
2021/09/06
1.2K0
推荐阅读
相关推荐
猿创征文 | 三款Python学习开发任选工具&两款数据库工具
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验