TooBug/wemark

自己的优化点供大家参考:图片预览,代码背景色,标题下划线等

Opened this issue · 4 comments

感谢作者,自己的优化点大家参考。

图片预览

  1. 在wemark.wmxl中,找到image标签,添加属性bindtap="wemarkTabImage"
  2. 然后wemark.js中的methods中增加函数:
      wemarkTabImage(e){
        wx.previewImage({
          current: e.currentTarget.dataset.src, // 当前显示图片的http链接
          urls: [e.currentTarget.dataset.src] // 需要预览的图片http链接列表
        })
      }

代码背景颜色

  1. 在wemark.wxss中,找到wemark_block_code,调整background-colo,我调整成黑色#2b2b2b
  2. 调整其他一些字体为白色:例如注解wemark_inline_code_annotation,调整color:#e0e0e0;
  3. 看下其他哪些字体比较黑看不到,自己调下

一级标题

  1. 不喜欢标题居中,把居中去掉
  2. 字体调大加粗
  3. 增加伪元素,加下划线
.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;
}

效果:
代码颜色:
image

一级目录:
image

图片预览:
image

image

字体高亮,微调了颜色,左右间距,圆角

.wemark_inline_code{
	background:#edebed;
	padding:3px 5px;
	word-wrap:break-word;
  border-radius:5px;
  margin-left:5px;
  margin-right:5px;
}

效果:
image

黑色背景要好看些,借鉴了

From WeChat Mini Programe: GitHub Trending Hub

我想问一下能发一下你的demo吗 我的为什么没有高亮而且图片也没有显示

我想问一下能发一下你的demo吗 我的为什么没有高亮而且图片也没有显示

You should append data-src="{{renderInline.src}}" into the Image element in wemark.html