自己的优化点供大家参考:图片预览,代码背景色,标题下划线等
Opened this issue · 4 comments
xiaoMzjm commented
感谢作者,自己的优化点大家参考。
图片预览
- 在wemark.wmxl中,找到image标签,添加属性bindtap="wemarkTabImage"
- 然后wemark.js中的methods中增加函数:
wemarkTabImage(e){
wx.previewImage({
current: e.currentTarget.dataset.src, // 当前显示图片的http链接
urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表
})
}
代码背景颜色
- 在wemark.wxss中,找到wemark_block_code,调整background-colo,我调整成黑色#2b2b2b
- 调整其他一些字体为白色:例如注解wemark_inline_code_annotation,调整color:#e0e0e0;
- 看下其他哪些字体比较黑看不到,自己调下
一级标题
- 不喜欢标题居中,把居中去掉
- 字体调大加粗
- 增加伪元素,加下划线
.wemark_block_h1{
font-size:50rpx;
/**不喜欢居中,把居中去掉**/
/**text-align: center;**/
margin-bottom:1em;
margin-top:40px;
font-weight: 500;
// 为伪元素而新增的position属性
position: relative;
}
.wemark_block_h1:after{
content: ''; /*CSS伪类用法*/
position: absolute; /*定位背景横线的位置*/
top: 130%;
background: #e0e0e0; /*宽和高做出来的背景横线*/
width: 100%;
height: 1px;
left:0px;
}
xiaoMzjm commented
ZhuPeng commented
黑色背景要好看些,借鉴了
From WeChat Mini Programe: GitHub Trending Hub
haiw2sm commented
我想问一下能发一下你的demo吗 我的为什么没有高亮而且图片也没有显示
dcalsky commented
我想问一下能发一下你的demo吗 我的为什么没有高亮而且图片也没有显示
You should append data-src="{{renderInline.src}}"
into the Image element in wemark.html