Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Show Gist In Markdown #982

Closed
1 task done
haozibi opened this issue Dec 17, 2019 · 16 comments · Fixed by #1238
Closed
1 task done

Show Gist In Markdown #982

haozibi opened this issue Dec 17, 2019 · 16 comments · Fixed by #1238
Labels
docs related to the documentation of docsify itself pr welcome

Comments

@haozibi
Copy link

haozibi commented Dec 17, 2019

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

  • 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:
@anikethsaha
Copy link
Member

can you share a reproducible repo.

@haozibi
Copy link
Author

haozibi commented Dec 17, 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>

@anikethsaha
Copy link
Member

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

@haozibi
Copy link
Author

haozibi commented Dec 17, 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 git@github.com: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

@anikethsaha
Copy link
Member

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

@haozibi
Copy link
Author

haozibi commented Dec 17, 2019

executescript:true

same problem, but console log is different.

u can look haozibi/t-docsify@6fa6dfb

image

@anikethsaha
Copy link
Member

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.

@Koooooo-7
Copy link
Member

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.

@stale
Copy link

stale bot commented Mar 15, 2020

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 stale bot added the wontfix label Mar 15, 2020
@MichaelCurrin
Copy link
Contributor

MichaelCurrin commented Apr 21, 2020 •
edited
Loading

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.

@stale stale bot removed the wontfix label Apr 21, 2020
@MichaelCurrin
Copy link
Contributor

MichaelCurrin commented Apr 21, 2020 •
edited
Loading

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.

@anikethsaha
Copy link
Member

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

@stale
Copy link

stale bot commented Jun 21, 2020

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 stale bot added the wontfix label Jun 21, 2020
@anikethsaha anikethsaha added docs related to the documentation of docsify itself and removed needs investigation help wanted wontfix labels Jun 21, 2020
@MichaelCurrin
Copy link
Contributor

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
Copy link
Contributor

I'll get it in today

@MichaelCurrin MichaelCurrin mentioned this issue Jun 21, 2020
Merged
11 tasks
@MichaelCurrin
Copy link
Contributor

Added! 🎉 📝

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
docs related to the documentation of docsify itself pr welcome
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix #932 - Add embed gist instructions to Embed Files MichaelCurrin/docsify
4 participants
@haozibi @MichaelCurrin @anikethsaha @Koooooo-7