Giter VIP home page Giter VIP logo

wemark's Introduction

wemark - 微信小程序Markdown渲染库

Travis MIT

小程序已原生支持HTML渲染,基本可替代wemark,推荐使用。本库年久失修,目前处于不维护状态,请谨慎使用。

wemark

背景和功能

用于在小程序中渲染Markdown文本。

在小程序诞生之前,Markdown的渲染一般需要解析成HTML,然后渲染解析后的HTML。然而小程序并没有提供HTML渲染的功能,因此在wemark诞生之前,几乎所有的Markdown渲染库全部无法在小程序下正常工作。

wemark可以实现在小程序下渲染Markdown内容,支持图片、表格在内的大部分Markdown特性。

特性

  • 以小程序自定义组件形式提供,可直接引入使用
  • 支持大部分markdown标记的解析、渲染(详细支持情况见下方附录)
  • 支持代码表格、代码高亮、HTML视频等特性
  • 支持使用原生rich-text进行渲染
  • 兼容mpvue等开发框架

使用方式

  1. 下载并拷贝wemark目录到小程序根目录
  2. 在页面的配置文件中引用wemark组件
    {
    	"usingComponents": {
    		"wemark": "../wemark/wemark"
    	}
    }
  3. WXML中使用:<wemark md="{{md}}" link highlight type="wemark"></wemark>

详细代码可见demo目录,该目录是一个完整的小程序“代码片段”项目,可在wemark根目录先运行npm run copy,然后添加到微信开发者工具的“代码片段”中进行体验。

参数说明:

  • md,必填,需要渲染的Markdown字符串;
  • link,是否解析链接,如果解析,会使用小程序navigator组件展现,可在小程序内跳转,默认为false
  • highlight,是否对代码进行高亮处理,默认为false
  • type,渲染方式,wemark会使用wemark的数据结构和模板进行渲染,rich-text会使用小程序内置的rich-text组件进行渲染(不支持链接跳转、视频)。

注:代码高亮会使标签数量和解析后的数据量增大,不排除产生渲染性能问题,请根据实际需要酌情使用。

其它框架中使用

mpvue

mpvue支持引入微信自定义组件,可在页面的.js文件中添加配置,引用wemark,然后在.vue文件的template部分直接使用wemark

export default {
  config: {
    // 这儿添加要用的小程序组件
    usingComponents: {
      wemark: '../../static/wemark/wemark'
    }
  }
}
<wemark :md="md" link highlight type="wemark"></wemark>

注:为了让mpvue打包时能把wemark包一并打包到dist目录,建议将wemark放置在源码static目录下。

本项目mpvue目录中包含完整的mpvue小程序演示项目,可在wemark根目录运行npm run copy,然后在微信开发者工具中打开使用。

taro

在已有的taro项目中进行如下修改:

  1. wemark放入src目录,即src/wemark目录
  2. 设置编译时复制wemark目录,修改config/index.js,在copy设置项中增加wemark,参考如下:
    copy: {
      patterns: [
        {
          from: 'src/wemark',
          to: 'dist/wemark',
        },
      ],
      options: {
      }
    },
  3. 设置taro编译时忽略remarkable.js,继续修改config/index.js,参考如下:
    weapp: {
      compile: {
        exclude: [
          'src/wemark/remarkable.js',
        ]
      },
      ...
    }
  4. 在页面中引入和使用wemark,例如src/pages/index/index.js
    config = {
      navigationBarTitleText: '首页',
      usingComponents: {
        wemark: '../../wemark/wemark'
      }
    }
    state = {
      md: '# heading\n\nText'
    }
    //...
    render () {
      return (
        <View className='index'>
          <wemark md={this.state.md} link highlight type='wemark' />
        </View>
      )
    }
  5. global.d.ts 中添加以下内容(仅 typescript 项目)
    declare namespace JSX {
      interface IntrinsicElements {
        wemark: any
      }
    }

本项目taro目录中包含完整的taro小程序演示项目,可在wemark根目录运行npm run copy,然后在微信开发者工具中打开使用。

特别感谢 @Songkeys 全程跟进taro使用事宜,详情见 #36

附:特性

  • 标题
  • 段落
  • 代码段(可高亮)
  • 引用
  • 无序列表
  • 有序列表
  • 粗体
  • 强调(斜体)
  • 删除线
  • 行内代码
  • 图片
  • 表格
  • HTML标记
    • 视频

测试

npm install
npm test

开源协议

MIT

用户列表

如果你也使用了 wemark,欢迎提 PR 将自己的小程序加入列表

版本记录

v2.0.0 2019-02-23

  • 修复代码高亮开启时部分代码显示错误的问题 #58

v2.0.0-beta2 2018-08-18

  • 修复HTML代码高亮的bug #39

v2.0.0-beta1 2018-07-12

  • 重构代码,使用小程序自定义组件发布,兼容mpvue #34 #32 #24
  • 支持代码高亮 #25
  • 支持链接解析,在小程序内跳转 #37
  • 支持使用小程序富文本组件rich-text渲染
  • 支持“双空格+回车”的软换行渲染 #29

v1.2.3 2018-07-05

  • 支持缩进形式的代码段 #31 by kapeter
  • 修复“##”后不加空格和文字时渲染出错的问题 #27

v1.2.2 2018-01-30

  • 修复小程序框架更新后数组判断失效导致渲染失败的问题 #17

v1.2.1 2017-07-24

  • 支持使用video[poster]属性添加视频封面图 #15 by @kilik52

v1.2.0 2017-06-30

  • 一些渲染细节样式修正 #9 #10
  • 图片渲染使用widthFix模式,不再动态计算高度 #11 #12

v1.1.0 2017-01-22

  • 添加删除线渲染(~~deleted~~
  • 添加HTML视频解析(需求&初始实现 by @littledu)
  • 解析功能补齐自动测试

v1.0.0 2016-12-12

  • 基本功能

wemark's People

Contributors

f-loat avatar flytam avatar giscafer avatar herock avatar imaiya avatar littledu avatar toobug avatar zhupeng avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wemark's Issues

使用图片fix-width mode

新版本支持了图片定宽,自动计算高度的模式,可以考虑去掉wemark中计算图片高度的逻辑

为什么需要传入 page 和 name?

目前的用法

        wemark.parse(task.description, this, {name: 'wemark'})

为什么不做成这样

     this.setDate({wemark: wemark.parse(task.description) })

请问是处于什么目的要把 API 设计得这么奇怪?

能否支持 空格+空格+回车换行

貌似现在只处理了两个回车形成一个段落 <p>,但是好像没有处理空格+空格+回车换行 <br> 的情况,能否支持?感谢。

图片放大预览显示

markdown 显示出来的图片,点击放大查看。
这个功能怎么实现?
谢谢大佬支持

块级代码高亮没效果

感谢作者的库,遇到一个问题:

代码

这样格式的代码没有高亮,highlight有没有都没有区别

真机渲染某些 Markdown 的时候出现 SyntaxError Unexpect EOF 错误

比如渲染下面这个文本的时候:

## 感谢大家,上期629人参与了

## 这次直播大纲

今晚再开一期。讲讲最近学到的:

1. 用户登录,微信要求过程非常安全,分为明文数据和敏感数据,这一部分搞了半天,比较难懂,讲讲
2. 本地存储,微信本地存储的 API
3. 直播技术,如何在小程序弄直播

![login1.png](http://i.quzhiboapp.com/AJ0B8j)


# 最近的进展

## 报名页面

![small2.jpeg
](http://i.quzhiboapp.com/5K1dzP)

## 小程序里看直播

![smallapp.jpeg](http://i.quzhiboapp.com/wEMOst)

# 上期直播情况

![xi1.jpeg](http://i.quzhiboapp.com/pXgJXq)

![xi2.jpeg](http://i.quzhiboapp.com/1RKHm1)

![xi5.jpeg](http://i.quzhiboapp.com/FvxJKC)

![xi6.jpeg](http://i.quzhiboapp.com/vJ5BS3)


真机上出现错误:

wechatimg3951

虽然 Markdown 能显示,但这会导致页面的其它 JS 执行失败。比如其它不相关的元素显示不了。

求教~~

@TooBug

传入的字符串不是以#开头,会报错

业务上字符串需要以普通段落开头,会报错

接着发现在字符串前面加上#,就可以正常渲染

希望能改进,支持普通文本开头

插件版本:v2.0.0-beta2

提几个遇到的小问题

首先非常感谢作者的无私奉献,使用中的小程序已上线,再次感谢!

有几点问题

  • 纯文本需有两个换行符才会换行
    比如源码是这样
test1
test2

渲染出来是这样

test1test2
  • 还有就是现在没做删除线是吗,没有效果

请问能否支持代码高亮?

目前渲染的代码段格式没有问题,但不支持代码高亮。非常需要这个功能,请问是否有计划支持?

使用制表符标识代码段的问题

问题:
我用的markdown语法中是用制表符来标识代码段,wemark解析不了。

解决方案:
将blockToken.type === 'fence' 改为 blockToken.type === 'code'就好了

忽略 meta data

希望能忽略 markdown 前边的 metadata
类似这种:

---
layout: post
title: Blogging Like a Hacker
---

能否支持页面跳转

比如支持如下markdown语法
点击查看商品 [华炎微站](/pages/product/view?id=xxx)
点击之后,navigateTo 对应的页面

有序列表内部文字序号问题

原文为:

  1. 信息推送

    您在使用我们的服务时,我们可能向您发送电子邮件、短信、资讯或推送通知。您可以按照我们的相关提示,在设备上选择取消订阅。

预期的效果:

1. 信息推送

    您在使用我们的服务时,我们可能向您发送电子邮件、短信、资讯或推送通知。您可以按照我们的相关提示,在设备上选择取消订阅。

Wemark 实际渲染效果
image

列表内部的文字会莫名其妙多出一个序号。

前后台切换之后,图片消失

这个问题是在真机上发现的,我后来发现在模拟器上也能重现。100%会重现。步骤如下:

  1. 加载一个md文件,里面有图片,如下图:

2017-06-29 5 17 59

  1. 点击左侧工具栏的“后台”按钮,模拟小程序进入后台,如下图:

2017-06-29 5 18 14

  1. 点击“前台”按钮,模拟小程序回到前台,等待1~3秒钟,图片就没了。如下图:

2017-06-29 5 18 21

我可以确定的是,自己放在其他地方的image是不会出现这个问题的。只有wemark解析的image才会有。

使用video标签渲染时小程序报错

请教一个问题,在使用video富文本标签来渲染的时候发现小程序会对视频资源加上一串前缀,导致视频资源无法正常加载,具体情况如下:

小程序的js代码如下

var wemark = require('../../wemark/wemark');
// 需要渲染的Markdown文本

Page({
    data: {
        wemark:{},
    },
    onLoad: function(){
        var videoHtml= '<video src="​http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls></video>';
        wemark.parse(videoHtml, this, {
          name: 'wemark'
        });
    }
})

对应的wxml代码如下:

<import src="../../wemark/wemark.wxml"/>
<template is="wemark" data="{{...wemark}}"></template>

在小程序开发工具打开的时候,小程序会先这样请求视频资源,抛出一个错误:

VM2379:2 Failed to load other http://641688836.debug.open.weixin.qq.com/pages/index/%E2%80%8Bhttp://wxsns…0204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400 : the server responded with a status of 404 (HTTP/1.1 404 Not Found) 

不知道为啥小程序请求视频资源的时候会带上前面的http://641688836.debug.open.weixin.qq.com/pages/index/%E2%80%8B,这使得视频资源无法正确加载下来,也就是导致视频不能播放。

同样用这个视频资源,直接在wxml里面加载video组件的话,则不会出现上面的情况,所以可以排除视频资源是不可用的这种情况。

为什么wxml报错

在wxml里面

的tempalte data="{{...wemark}}"这里...报错

结果编译的时候报错:VM1646:2 ./pages/index/index.wxml
Bad attr 'data' with message
1 |

2 |

工程文件最好包含完整demo

wemark在线上没有效果

我的项目在使用wemark作为markdown的渲染库,明明在微信的编译器上能显示效果,但在手机上体验预览和项目上线却不能显示效果,为什么会这样?请尽快解答,新项目要紧

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.