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.

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

Scrolling fails when adding katex #6

Closed
yngtodd opened this issue Mar 10, 2019 · 5 comments
Closed

Scrolling fails when adding katex #6

yngtodd opened this issue Mar 10, 2019 · 5 comments
Labels
question Further information is requested

Comments

@yngtodd
Copy link

yngtodd commented Mar 10, 2019

I am finding when I add the required scripts to my index.html, katex renders properly, but I am unable to scroll on any of the pages of my site. I am hosting on GitHub's pages. Here is my index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Firebook</title>
  <link rel="icon" href="_media/orange_slime.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="./theme.css">
</head>
<body>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: 'Firebook',
      repo: 'yngtodd/firebook',
      coverpage: true,
      loadSidebar: true,
      loadNavbar: false,
      maxDepth: 2,
      subMaxLevel: 2,
      basePath: 'https://raw.githubusercontent.com/yngtodd/firebook/master/docs',
      search : [
        '/',
        '/overview',
        '/getting_started/',
      ]
    }
  </script>
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
</body>
</html>
@yngtodd
Copy link
Author

yngtodd commented Mar 10, 2019

My fault, I had messed up here. Modifying the tail end of that html to the following scripts fixed it.

  ...
  <!-- CDN files for docsify-katex -->
  <script src="//cdn.jsdelivr.net/npm/docsify-katex@latest/dist/docsify-katex.js"></script>
  <!-- or <script src="//cdn.jsdelivr.net/gh/upupming/docsify-katex/dist/docsify-katex.js"></script> -->
  <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/katex@latest/dist/katex.min.css">
  <script src="//cdn.jsdelivr.net/npm/docsify@latest/lib/docsify.min.js"></script>
  <script src="https://unpkg.com/docsify/lib/docsify.min.js"></script>
  <script src="https://unpkg.com/docsify/lib/plugins/search.min.js"></script>
</body>
</html>

@yngtodd yngtodd closed this as completed Mar 10, 2019
@yngtodd yngtodd reopened this Mar 10, 2019
@yngtodd
Copy link
Author

yngtodd commented Mar 10, 2019

Sorry to quickly open, close, and finally reopen this issue. After the last mentioned change to my index.html, scrolling and katex were working fine for a bit. After some time, without further changes to the index.html, the page failed to scroll. Not sure what could be causing this.

@upupming
Copy link
Owner

upupming commented Mar 11, 2019

@yngtodd Thanks for reporting this problem, after navigating to your repo, I found the root of this problem is your theme.css file, I'm not sure where this CSS file came from and which version it is, please replace it with:

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@latest/lib/themes/vue.css">

or any theme from here https://github.com/docsifyjs/docsify/tree/master/lib/themes, and then test again, and report here.

By the way, did you try the demo page of docsify-katex, you can see my source code at https://github.com/upupming/docsify-katex/tree/master/docs, copying and then modifying the configuration of docsify-katex is always a good idea.

@upupming upupming added the question Further information is requested label Mar 11, 2019
@yngtodd
Copy link
Author

yngtodd commented Mar 11, 2019

Oh wow, you went above and beyond to help me. Thank you, I really appreciate that.

You are right, swapping out the stylesheet did the trick.

Thanks again!

@yngtodd yngtodd closed this as completed Mar 11, 2019
@upupming
Copy link
Owner

Glad I can help, you can add your project to our demo sites now, see #7 if you are interested!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
question Further information is requested
Projects
None yet
Development

No branches or pull requests

2 participants