最新消息:20210816 当前crifan.com域名已被污染,为防止失联,请关注(页面右下角的)公众号

【记录】gitbook换用更好看的hint callout提示

gitbook crifan 4398浏览 0评论

关于提示,后来看到:

Rich Content – GitBook

中提到的:

很好看,比之前:

【记录】给Gitbook添加更多配置和功能 – 在路上

的插件的效果:

好看多了。

抽空去搞清楚,如何实现gitbook官网所说的hint callout的效果。

gitbook Hints  Callouts

gitbook-plugin-callouts – npm

效果好像也还行。

Simran-B/gitbook-plugin-callouts: Styled hints: note, info, tip, warning, danger

效果一般:

GitbookIO/plugin-hints: GitBook plugin. Defines 4 types of styled hint blocks: info, danger, tip, working

无图,不知道效果。

插件 · gitbook-guide

还行

Developers – Nicer gitbook plugin for rich-quotes –

-》

erixtekila/gitbook-plugin-richquotes: Gitbook plugin : Transform annoted quotes to notes

之前自己用的就是这个,很难看。

抽空还是去试试:

https://www.npmjs.com/package/gitbook-plugin-callouts

吧。

gitbook official Hints Callouts

没找到,如何把官网的好看的callout弄过来

难道是:

最新版本的gitbook中已经默认支持了?

抽空去试试,升级gitbook的(命令行)版本,看看生成的效果是不是最新的

gitbook support Hints

gitbook-plugin-hints – npm

->

GitbookIO/plugin-hints: GitBook plugin. Defines 4 types of styled hint blocks: info, danger, tip, working

gitbook-plugin-blurbs – npm

->

alexcheng1982/gitbook-plugin-blurbs: Blurbs (hints) in GitBook, supports content parsing

对于官网的:

gitbook rich content Hints

Migrating from the previous version – GitBook

Important differences – GitBook

好像是:

“Differences that you should be aware of before migrating from legacy.gitbook.com to the new GitBook.”

此处所看到的gitbook的官网的好看的hint

只是其自己官网的效果,而不是gitbook本身的工具支持的

【记录】gitbook升级到新版本

所以此处确认了:

前面看到

Rich Content – GitBook

提到的好看的hint的支持,只是新版本的gitbook的在线网站(和新版editor编辑器?)中支持的。

旧版本不支持。

而由于新版有些其他问题,所以暂时不去升级。

然后想办法去看看,用哪个相对也好看,还算能接受的插件去优化显示效果

之前自己用的是:

https://plugins.gitbook.com/plugin/alerts

GitbookIO/plugin-hints: GitBook plugin. Defines 4 types of styled hint blocks: info, danger, tip, working

虽然star 11,好像只支持asciidoc?

而基于其优化的:

alexcheng1982/gitbook-plugin-blurbs: Blurbs (hints) in GitBook, supports content parsing

估计也还是只是支持Asciidoc

另外还有一个支持Asciidoc的插件:

Simran-B/gitbook-plugin-callouts: Styled hints: note, info, tip, warning, danger

而最早的:

erixtekila/gitbook-plugin-richquotes: Gitbook plugin : Transform annoted quotes to notes

虽然看起来支持种类很多,但是很丑:

某人优化了:

gubler/gitbook-plugin-callouts: Gitbook plugin : Transform annoted quotes to notes

别人继续优化后:

而基于bootstarp的:

stuebersystems/gitbook-plugin-bootstrap-callout: GitBook plugin: Adds Bootstrap like callouts to your GitBook

看起来好看多了:

语法是:

“Create callouts

Callouts are an extension of markdown blockquotes. All callouts must start with a h4 header, ”

也就是:

https://zq99299.gitbooks.io/gitbook-guide/content/chapter/plugin.html#bootstrap-callout-多风格样式标注

中推荐的。

其实还从:

Developers – Nicer gitbook plugin for rich-quotes –

-》

Start the REPL · Clojurescript Practicalli

对于这种浅绿色,觉得其他挺好看的,而且title也有背景色

比之前的:

https://github.com/gubler/gitbook-plugin-callouts

的配色配的好,但是需要手动研究,如何才能集成到:

https://github.com/stuebersystems/gitbook-plugin-bootstrap-callout

所以暂时放弃吧。

有空再去折腾集成的事情。

暂时就用这个

https://github.com/stuebersystems/gitbook-plugin-bootstrap-callout

吧。

去试试把之前的:

改为:

/Users/crifan/GitBook/Library/Import/youdao_note_summary/book.json

<code>  "plugins": [
    "theme-comscore",
    "-lunr",
    "-search",
    "search-plus",
    "disqus",
    "-highlight",
    "prism",
    "prism-themes",
    "github-buttons",
    "splitter",
    "-sharing",
    "sharing-plus",
    "tbfed-pagefooter",
    "expandable-chapters-small",
    "ga",
    "donate",
    "sitemap-general",
    "copy-code-button",
    "-alerts",
    "bootstrap-callout",
    "toolbar-button"
  ],
</code>
<code>&lt;!-- &gt; **[warning] 要客户端或Chrome浏览器才能支持拖放**
&gt; * 独立客户端版本
&gt;   * Windows的桌面版、Mac的桌面版,完美支持拖放。
&gt; * Web网页版
&gt;   * `Windows`:中的浏览器好像一般浏览器都支持拖放的
&gt;   * `Mac`:用`Chrome`浏览器才支持拖放
&gt;       * Mac中的`Safari`是不支持拖放的 --&gt;

&gt; #### warning::要客户端或Chrome浏览器才能支持拖放
&gt; * 独立客户端版本
&gt;   * Windows的桌面版、Mac的桌面版,完美支持拖放。
&gt; * Web网页版
&gt;   * `Windows`:中的浏览器好像一般浏览器都支持拖放的
&gt;   * `Mac`:用`Chrome`浏览器才支持拖放
&gt;       * Mac中的`Safari`是不支持拖放的
</code>

效果:

还是不错的。

【总结】

最后,也去试试另外的:

gubler/gitbook-plugin-callouts: Gitbook plugin : Transform annoted quotes to notes

<code>"plugins": [
    "-alerts",
    "-bootstrap-callout",
    "callouts",
    "toolbar-button"
  ],
  "pluginsConfig": {
    "callouts": {
      "showTypeInHeader": false
        },
 }
</code>

然后效果:

看起来不错,挺醒目的。那就用这个了。

转载请注明:在路上 » 【记录】gitbook换用更好看的hint callout提示

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
82 queries in 0.167 seconds, using 22.08MB memory