更琐碎的编辑器细节 / Some more trival details about Steemit

in #cn7 years ago

Steemit的前端代码在https://github.com/steemit/condenser/,读一读它的源代码,可以了解一些关于编辑器的技术细节。

排版问题

Markdown

Steemit里所有的markdown指南都指向https://guides.github.com/features/mastering-markdown/,但其实并没有实现其中所有的功能。大体上,使用其中标准的 Basic syntax (或者叫做CommonMark)是比较安全的,但github favor的部分就说不定了。

编辑器使用的markdown渲染库是remarkable。除了基本语法以外,只支持脚注、删除线和表格等一些基本的语法,而且现在脚注的实现还有些问题。没有 代码高亮 ,更没有 数学公式渲染 ,可能这东西并不是面对我们这样的用户。

这里是关于高级markdown特性的测试。从这里可以看到其源码。

顺便一提,我用的hugo静态博客生成器使用blackfriday,配置项很多,我十分满意。

那么用HTML实现高级功能呢?

很遗憾,这也不大可能。经过sanitize过滤,编辑器只支持以下几个标签:

div, iframe, del,
a, p, b, i, q, br, ul, li, ol, img,
h1, h2, h3, h4, h5, h6, hr,
blockquote, pre, code, em, strong, center,
table, thead, tbody, tr, th, td,
strike, sup, sub

并没有什么超过Markdown语法的新功能。

当然,编辑器好心地提供了几个class来控制文字和图像的位置:

'pull-right', 'pull-left', 'text-justify', 'text-rtl', 'text-center', 'text-right', 'videoWrapper'

用法大概是 < div class="pull-right"> < img src="imglink" />< /div >,或者看这里的介绍。

文章的URL生成原理

如果我在发布之前就知道文章的URL的话,就可以在文中引用自己了。这大概是一种自举 ;-)

如果你的文章标题是纯中文的话就很简单了:地址是随机的。所以最好在标题里加上些英文(虽然看起来有点蠢)。

URL通过speakingurl生成。比如,本文标题经过处理(过程见此处),得到some-more-trival-details-about-steemit,如果我之前没有发过同名文章的话,本文的URL就是https://steemit.com/cn/@heyeshuang/some-more-trival-details-about-steemit,大概。

这里是源代码中具体的实现函数,适合像我这样刻薄的人。

Coin Marketplace

STEEM 0.19
TRX 0.18
JST 0.035
BTC 91087.60
ETH 3181.87
USDT 1.00
SBD 2.78