Code Monkey home page Code Monkey logo

hyperdown's Introduction

为何要写这样一个解析器

Markdown已经面世许多年了,国内外许多大大小小的网站都在用它,但是它的解析器却依然混乱不堪。SegmentFault 是**较大规模使用 Markdown 语法的网站,我们一直在使用一些开源类库,包括但不限于

  1. php-markdown
  2. CommonMark for PHP
  3. Parsedown

他们都有或多或少的毛病,有的性能较差,有的代码比较业余,更多的情况是由于Markdown本身解析比较复杂,因此我们几乎无法去维护另外一个人写的代码。基于这个原因,我为 SegmentFault 专门编写了这么一个Markdown解析器。

使用方法

与常规的解析类库没有任何区别

$parser = new HyperDown\Parser;
$html = $parser->makeHtml($text);

当前支持的语法

  • 标题
  • 列表(可递归)
  • 引用(可递归)
  • 缩进风格的代码块
  • Github风格的代码块
  • 各种行内文字加粗,斜体等效果
  • 链接,图片
  • 自动链接
  • 段内折行
  • 脚标
  • 分隔符
  • 表格
  • 图片和链接支持互相套用

浏览器中使用请参阅 HyperDown.js

hyperdown's People

Contributors

fenbox avatar joyqi avatar kumfo avatar techquery avatar wtser 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  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

hyperdown's Issues

内容包含链接会报错

我在laravel8框架中引用 传入的文章内容如果包含http的链接就会报一个Undefined offset: 4错误 在Parser文件代码的545行

列表解析

1. test1
+ test2

这样的markdown语句解析得到的html为

<ol></ol><ul><li><p>test1</p></li><li><p>test2</p></li></ul>

按常理说应该是全部ol,或者是test1为ol, test2为ul;而不应该是现在这个结果。希望解答,谢谢。

列表解析问题很多

一旦列表中使用了 ``` 代码段,则列表无法结束,比如下面这段,“这是列表外的内容。”始终显示在列表内。

  • ⽆序列表:

    使⽤星号(*)、加号(+)或是减号(-),在后面再加一个空白作为列表标记:

    * 红色
    * 绿色
    * 蓝色
    

    列表结尾

这是列表外的内容。


如果列表中使用了缩进形式的代码段则列表会提前结束:

  • ⽆序列表:

    使⽤星号(*)、加号(+)或是减号(-),在后面再加一个空白作为列表标记:

    * 红色
    * 绿色
    * 蓝色
    

    列表结尾

这是列表外内容。


用空行分开的列表项,会连载一起:

  • aaa
  • bbb

  • aaa

  • bbb

显示一样

加粗的一个bug

这是前台js预览的效果:
image
这是页面渲染出来的效果:
image
文章链接
希望作者修复一下,这个库还是蛮不错的

图片链接解析 BUG

[ ![pic.jpg](http://pic.jpg) ]( http://url.com )
这种链接的解析会存在问题,无法解析出图片标签。

gif,code解析出错

当时发布了这篇文章,结果只有1个gif显示出来了。还有很多用"`"标注的code在页面上解析显示成一串数字和字符组合了。很是蛋疼

一些review

-line 393
if (strlen($matches[1]) >= $this->getBlock()[3]) {
-line 401
if (strlen($matches[1]) >= $this->getBlock()[3][0]) {
这数组存储的--.

function parseInline
str_replace(['[', ']'], ['[', ']'], $matches[1])
上面这行代码,同一函数定义的数组重复多次-。- 是否可以优化

解析BUG

实际的效果应该是:[PPT] 链接

$parser = new \HyperDown\Parser();                                                                                                                                               
$text = <<<TTT                                                                                                                                                                       
[PPT] [链接](http://www.tuniu.com)                                                                                                                                                    
TTT;                                                                                                                                                                                 
$html = $parser->makeHtml($text);    

解析的效果是:

PPT] [链接 😢

图片解析也存在这样的问题。

文章入口

image

table有问题?

| Left-Aligned  | Center Aligned  | Right Aligned |
| :------------ |:---------------:| -----:|
| col 3 is      | some wordy text | $1600 |
| col 2 is      | centered        |   $12 |
| zebra stripes | are neat        |    $1 |

| Item      | Value |
| --------- | -----:|
| Computer  | $1600 |
| Phone     |   $12 |
| Pipe      |    $1 |

找的demo,发现错误

Left-Aligned Center Aligned Right Aligned
col 3 is some wordy text $1600
col 2 is centered $12
zebra stripes are neat $1
Item Value
Computer $1600
Phone $12
Pipe $1

[google][]这种参考链接不会被解析

如下面这个例子里有两个参考链接,都没有被解析出来。

<?php
include 'Parser.php';
$mk = new HyperDown\Parser();

file_put_contents("r.txt",$mk->makehtml('<!--markdown-->[糗事百科][]今天在新浪微博发表了一条这样的微博:

> 网络无障碍公益纪录片《1%》:2014年5月22日,糗百影视小分队奔赴杭州 采访了一位特殊的糗友。他叫[顾伶磊][],是一位视障人。去年底,他给糗百发了一封私信,希望我们为盲人开发无障碍的糗百客户端。现在我们app的视障版已经发布了,想听听他有什么看法……

<embed src="http://www.tudou.com/v/eKPUp2sPPhQ/&bid=05&resourceId=0_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="400"></embed>

土豆网播放地址: <http://www.tudou.com/programs/view/eKPUp2sPPhQ/>


<div>dddd</div>
<br />

[糗事百科]: http://weibo.com/1850235592/B62V5k3r9?type=repost
[顾伶磊]: http://weibo.com/n/%E9%A1%BE%E4%BC%B6%E7%A3%8A
'));

当文中有直接书写的html代码的时候,会被全部转意

如下面的内容,embed元素和div元素作为独立段落存在,都被转意了。
这样的结果是无法在markdown文本里书写html了。

<?php
include 'Parser.php';
$mk = new HyperDown\Parser();

file_put_contents("r.txt",$mk->makehtml('<!--markdown-->[糗事百科][]今天在新浪微博发表了一条这样的微博:

> 网络无障碍公益纪录片《1%》:2014年5月22日,糗百影视小分队奔赴杭州 采访了一位特殊的糗友。他叫[顾伶磊][],是一位视障人。去年底,他给糗百发了一封私信,希望我们为盲人开发无障碍的糗百客户端。现在我们app的视障版已经发布了,想听听他有什么看法……

<embed src="http://www.tudou.com/v/eKPUp2sPPhQ/&bid=05&resourceId=0_05_05_99/v.swf" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" wmode="opaque" width="480" height="400"></embed>

土豆网播放地址: <http://www.tudou.com/programs/view/eKPUp2sPPhQ/>


<div>dddd</div>
<br />

[糗事百科]: http://weibo.com/1850235592/B62V5k3r9?type=repost
[顾伶磊]: http://weibo.com/n/%E9%A1%BE%E4%BC%B6%E7%A3%8A
'));

有个bug,关于textarea标签

我写一个textarea标签内有一段html代码(虽然不应该用textarea展示代码),发现里面的代码会被加上

是否能增加白名单 tag 功能?

开启了 html 标签白名单以后,如果用户插入一段这样的代码

<i onclick="alert(233)">XSS</i>

还是可以成功触发 onclick 事件
是否能加入一个白名单的功能,比如指定了只能加入 style、class 这些 tag
谢谢。

列表项后面的段落缩进处理不正确

列表项下面的第一层缩进应该是被处理成列表项内容对齐,第二层缩进才是代码。HyperDown直接把第一层缩进处理成代码了。

预览是正确的

image

但发布后不正确了

image

能否加上todolist呢?

  • 加或不加
  • 是个问题呢
- [ ] i
  - [ ] missing
  - [ ] you
  - [x] so
- [x] much
  • i
    • missing
    • you
    • so
  • much

btw:上次问题反馈处理真是速度,谢谢

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.