Docsify: Show Gist In Markdown

Created on 17 Dec 2019  ·  16Comments  ·  Source: docsifyjs/docsify




Bug Report

hello,I have a problem. I write gist embed link in markdown,but docsify don't show it.

I want to know how to show gist in docsify

Steps to reproduce

  • index.html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="_media/favicon.ico">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css">

  <!-- mermaid -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.css">
  <script src="//cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
</head>

<body>
  <div id="app"></div>
  <script>
    mermaid.initialize({ startOnLoad: false });
    window.$docsify = {
      repo: 'haozibi/',
      auto2top: true,
      subMaxLevel: 2,

      executeScript: true,

      loadSidebar: true,
      loadNavbar: true,
      search: 'auto', 
      markdown: {
        renderer: {
          code: function (code, lang) {
            if (lang === "mermaid") {
              return (
                '<div class="mermaid">' + mermaid.render(lang, code) + "</div>"
              );
            }
            return this.origin.code.apply(this, arguments);
          }
        }
      },
    }
  </script>
  <script src="//unpkg.com/docsify/lib/docsify.min.js"></script>

  <script src="//unpkg.com/docsify/lib/plugins/external-script.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/search.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
  <script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
  <script src="//unpkg.com/docsify-copy-code"></script>

  <script src="//unpkg.com/prismjs/components/prism-go.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-bash.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-python.js"></script>
  <script src="//unpkg.com/prismjs/components/prism-markdown.js"></script>
</body>

</html>
  • markdown
# test

<script src="https://gist.github.com/asukakenji/f15ba7e588ac42795f421b48b8aede63.js"></script>

What is current behaviour

Chrome console show

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

I am not very good at the FrontEnd, so I am confused about the problem. sorry~~

What is the expected behaviour

Other relevant information

  • [x] Bug does still occur when all/other plugins are disabled?
  • Your OS: Mac OS 10.13.6
  • Node.js version:
  • npm/yarn version:
  • Browser version: 79.0.3945.79（64 Bit）
  • Docsify version:
  • Docsify plugins:

PR Welcome docs
Source
picture haozibi

Most helpful comment

I could not get the gist embed script tag to work on Docsify...

But using Docify's embed approach and a raw URL, this works great to embed a gist.

For example, I found how to pull in and render markdown content.

[run_docsify_locally.md](//gist.githubusercontent.com/MichaelCurrin/4c8060dcc9d8841f842eeebc7a1436d8/raw/run_docsify_locally.md ':include')

I use that here: https://michaelcurrin.github.io/docsify-js-tutorial/#/?id=_1-install

Corresponding markdown here

Also, I wrote a short tutorial on this here: gist.

picture MichaelCurrin on 21 Apr 2020
❤1 👍1

All 16 comments

can you share a reproducible repo.

anikethsaha picture anikethsaha on 17 Dec 2019

can you share a reproducible repo.

like this: https://gist.github.com/haozibi/3a7a87ec010374c4ad5b926bd695fca9

<script src="https://gist.github.com/haozibi/3a7a87ec010374c4ad5b926bd695fca9.js"></script>
haozibi picture haozibi on 17 Dec 2019

Not the gist , a repo would have been better.
Ok leave, I will take a look in this soon 👍

anikethsaha picture anikethsaha on 17 Dec 2019

Not the gist , a repo would have been better.
Ok leave, I will take a look in this soon 👍

Maybe u can look https://github.com/haozibi/t-docsify

step 👇

$ git clone [email protected]:haozibi/t-docsify.git
$ cd t-docsify
$ docsify init docs

Initialization succeeded! Please run docsify serve docs

# insert gist
$ docsify serve docs

Serving /Users/bi/Desktop/t-docsify/docs now.
Listening at http://localhost:49635
haozibi picture haozibi on 17 Dec 2019

You need to enable this executescript:true in order to run the inline scripts , here is the docs https://docsify.js.org/#/configuration?id=executescript

anikethsaha picture anikethsaha on 17 Dec 2019

executescript:true

same problem, but console log is different.

u can look https://github.com/haozibi/t-docsify/commit/6fa6dfb190149de0df315050c061de23b76e7549

image

haozibi picture haozibi on 17 Dec 2019

Thanks , I will take a look soon.
In the meant time, could try with other external links and just check if the behavior is the same or not.

anikethsaha picture anikethsaha on 17 Dec 2019

In my opinion.u can't include the "Gist js "directly.
There is a part of content of the "Gist js "such as u posted（https://gist.github.com/haozibi/3a7a87ec010374c4ad5b926bd695fca9.js). 

document.write('<link rel="stylesheet"...

We can't use the document. write in async loading after the document loaded over.
I think u should change another way to resolve this issue.

Koooooo-7 picture Koooooo-7 on 18 Dec 2019

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 15 Mar 2020

I could not get the gist embed script tag to work on Docsify...

But using Docify's embed approach and a raw URL, this works great to embed a gist.

For example, I found how to pull in and render markdown content.

[run_docsify_locally.md](//gist.githubusercontent.com/MichaelCurrin/4c8060dcc9d8841f842eeebc7a1436d8/raw/run_docsify_locally.md ':include')

I use that here: https://michaelcurrin.github.io/docsify-js-tutorial/#/?id=_1-install

Corresponding markdown here

Also, I wrote a short tutorial on this here: gist.

MichaelCurrin picture MichaelCurrin on 21 Apr 2020
❤1 👍1

I'm happy to add to the Docsify embed doc with a short explanation on how to embed a gist like this, as an alternative to script tag.

MichaelCurrin picture MichaelCurrin on 21 Apr 2020

I'm happy to add to the Docsify embed doc with a short explanation on how to embed a gist like this, as an alternative to script tag.

feel free to submit a PR

anikethsaha picture anikethsaha on 22 Apr 2020
👍1

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] picture stale[bot] on 21 Jun 2020

Sorry this was at the back of my mind. I'll still do the PR discussed above for the enable scripts approach and my alt approach

MichaelCurrin picture MichaelCurrin on 21 Jun 2020
🎉1

I'll get it in today

MichaelCurrin picture MichaelCurrin on 21 Jun 2020

Added! :tada: :memo:

MichaelCurrin picture MichaelCurrin on 21 Jun 2020
👍1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

dooart picture dooart  ·  5Comments
dialex picture dialex  ·  4Comments
petrdvorak picture petrdvorak  ·  3Comments
toavinar picture toavinar  ·  3Comments
smlbiobot picture smlbiobot  ·  5Comments