用于微信小程序的HTML和Markdown格式的富文本渲染组件,支持代码高亮

网友投稿 1029 2022-10-17

用于微信小程序的HTML和Markdown格式的富文本渲染组件,支持代码高亮

用于微信小程序的HTML和Markdown格式的富文本渲染组件,支持代码高亮

html2wxml微信小程序富文本组件

效果

参考

小程序富文本解析 https://github.com/icindy/wxParse

PHP移植版highlight.js https://github.com/scrivo/highlight.php

PHP编写的Markdown解析器 https://github.com/erusev/parsedown

演示

扫码打开演示小程序

小程序端用法

三种版本演示

三种版本演示所用的小程序源码均在demo目录中

插件版本准备

组件版本准备

模板版本准备

组件使用方法(仅适用于插件版本和组件版本)

属性介绍

示例

// 将Page中的content数据作为HTML格式渲染// 禁用代码高亮功能// 禁用代码行号显示功能// 代码高亮样式改为tomorrow// 设置代码高亮检测语言 (最多6个,自行搭建服务不受限制)// 对HTML数据中的img标签的相对路径补全域名// 禁用加载中动画// 将Page中的text数据作为Markdown格式渲染// 直接渲染Page中的已经过解析的obj数据

服务端用法

富文本的解析默认是由QwqOffice完成,存在不稳定因素,你可以自行搭建解析服务或将解析组件引入到你的项目中。

复制整个 html2wxml-php 文件夹到项目目录中 引入类文件class.ToWXML.php include( 'path/to/html2wxml-php/class.ToWXML.php' ); 实例化html2wxml,进行解析并输出,示例: $towxml = new ToWXML(); $json = $towxml->towxml( '

H1标题

', array( 'type' => 'html', 'highlight' => true, 'linenums' => true, 'imghost' => null, 'encode' => false, 'highlight_languages' => array( 'html', 'js', 'php', 'css' ) ) ); echo json_encode( $json, JSON_UNESCAPED_UNICODE );

参数介绍

参数名类型默认值说明
textString要渲染的HTML或Markdown文本
argsArray[]附加参数

args 参数介绍

参数名类型默认值说明
typeStringhtml要渲染的文本类型,可用值html,markdown,md
highlightBooleantrue是否对pre内文本进行代码高亮
highlight_languagesArray['html', 'js', 'css', 'php']pre代码高亮检测语言。查看可用语言
linenumsBooleantrue是否为pre添加行号显示
imghostStringnullimg标签中src属性可能的相对路径进行域名补全
encodeBooleantrue是否对结果进行JSON编码

可用的代码高亮语言

语言名称和别名均可使用

语言名称别名
1c
abnf
accesslog
actionscriptas
ada
apacheapacheconf
applescriptosascript
arduino
armasmarm
asciidocadoc
aspectj
autohotkeyahk
autoit
avrasm
awk
axapta
bashsh,zsh
basic
bnf
brainfuckbf
cal
capnprotocapnp
ceylon
cleanclean,icl,dcl
clojure-repl
clojureclj
cmakecmake.in
coffeescriptcoffee,cson,iced
coq
coscos,cls
cppc,cc,h,c++,h++,hpp
crmshcrm,pcmk
crystalcr
cscsharp
csp
css
d
dart
delphidpr,dfm,pas,pascal,freepascal,lazarus,lpr,lfm
diffpatch
djangojinja
dnsbind,zone
dockerfiledocker
dosbat,cmd
dsconfig
dts
dustdst
ebnf
elixir
elm
erb
erlang-repl
erlangerl
excelxlsx,xls
fix
flix
fortranf90,f95
fsharpfs
gamsgms
gaussgss
gcodenc
gherkinfeature
glsl
gogolang
golo
gradle
groovy
haml
handlebarshbs,html.hbs,html.handlebars
haskellhs
haxehx
hsp
htmlbars
httphttps
hyhylang
inform7i7
initoml
irpf90
javajsp
javascriptjs,jsx
jboss-cliwildfly-cli
json
julia-repl
julia
kotlin
lassols,lassoscript
ldif
leaf
less
lisp
livecodeserver
livescriptls
llvm
lsl
lua
makefilemk,mak
markdownmd,mkdown,mkd
mathematicamma
matlab
maxima
mel
mercurym,moo
mipsasmmips
mizar
mojolicious
monkey
moonscriptmoon
n1ql
nginxnginxconf
nimrodnim
nixnixos
nsis
objectivecmm,objc,obj-c
ocamlml
openscadscad
oxygene
parser3
perlpl,pm
pfpf.conf
phpphp3,php4,php5,php6
pony
powershellps
processing
profile
prolog
protobuf
puppetpp
purebasicpb,pbi
pythonpy,gyp
qk,kdb
qmlqt
r
rib
roboconfgraph,instances
routerosrouteros,mikrotik
rsl
rubyrb,gemspec,podspec,thor,irb
ruleslanguage
rustrs
scala
scheme
scilabsci
scss
shellconsole
smalismali
smalltalkst
smlml
sqfsqf
sql
stan
statado,ado
step21p21,step,stp
stylusstyl
subunit
swift
taggerscript
tap
tcltk
tex
thrift
tp
twigcraftcms
typescriptts
vala
vbnetvb
vbscript-html
vbscriptvbs
verilogv,sv,svh
vhdl
vim
x86asm
xltao
xmlhtml,xhtml,rss,atom,xjb,xsd,xsl,plist
xqueryxpath,xq
yamlyml,YAML,yaml
zephirzep

来源

QwqOffice软件工作室 https://qwqoffice.com/

QwqOffice官网小程序(文章详情页富文本解析由 html2wxml 提供)

赞赏

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:Redis教程7-键(key)常用命令使用参考2
下一篇:UML类图的简单梳理
相关文章

 发表评论

暂时没有评论,来抢沙发吧~