Bilibili-Column-Helper icon indicating copy to clipboard operation
Bilibili-Column-Helper copied to clipboard

[Discussion] B站专栏对代码高亮(Syntax Highlight)的支持

Open zihengCat opened this issue 7 years ago • 7 comments

B站专栏似乎已经对代码高亮(Syntax Highlight)提供了支持,虽然目前还不太完善...Orz 我这边把代码更新了下,使用B站官方提供的代码高亮功能。 某昨酱,要不要试试把prismjs移除掉呢? screen shot 2018-08-27 at 09 32 17 screen shot 2018-08-27 at 09 32 34

zihengCat avatar Aug 27 '18 01:08 zihengCat

我觉得可以 我这边prismjs本来就是用来模拟b站对代码块的渲染 b站自己用的就是prism(好像),但和现在的版本还有点区别,所以我只能手动适配,如果可以直接用官方的也挺不错的x

Yesterday17 avatar Aug 27 '18 08:08 Yesterday17

@Yesterday17 B站也是,明明做出了好东西,就藏着不让人用...Orz

zihengCat avatar Aug 27 '18 10:08 zihengCat

确实,B站官方的代码高亮做的很完美。

Z-fly avatar Aug 27 '18 12:08 Z-fly

@zihengCat Code review sent~

Yesterday17 avatar Aug 27 '18 14:08 Yesterday17

@Yesterday17 marked.js实际以写在代码块后面代码块标识作为language的判断依据(如图所示)。

screen shot 2018-08-28 at 10 41 36

图:Markdown代码块标识

这实际上给予了我们扩展Markdown功能无限的想象力。 某昨酱,你可以参考markdown-plus这个项目(个人也挺喜欢的一款Markdown应用),其便是利用了这一特性对Markdown功能作了极大扩展(如图)。

screen shot 2018-08-28 at 11 05 18

图:LaTeX数学公式扩展

screen shot 2018-08-28 at 11 05 44

图:Gantt时序流程图扩展

这是项目地址:

markdown-plus:https://github.com/tylingsoft/markdown-plus markdown-plus在线版:http://mdp.tylingsoft.com/

至于,如何将这些高级扩展功能应用到B站专栏里,只要我们能实现转换为图片,就可以。

zihengCat avatar Aug 28 '18 03:08 zihengCat

转换图片倒是不难,毕竟有一个electron打底了(

Yesterday17 avatar Aug 28 '18 04:08 Yesterday17

@Yesterday17 我这边挺无能为力的...默认开发使用环境没有图形界面,不装图像库。本身也是个命令行程序...渲染不出图片。 electron打包了Node.jsChrome,整套前端环境都具备了,应该可以做的。

zihengCat avatar Aug 28 '18 04:08 zihengCat