Closed avj2352 closed 6 years ago
Hi @avj2352
Thanks for reporting this issue. Are you explicitly adding the stylesheet to your index.html file or just the javascript file? The reason I'm asking is that we made a change in the past day or so which you now don't need to add the stylesheet anymore.
Can you give me a code example of how you run the plugin, please?
@jperasmus : Sure, the errors are both to do with the stylesheet and script of copy-code so I will send the links as is in my file:
for CSS, this is the current link: < link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css" >
For JS, this is the current script tag:
Okay, thanks. You can remove the stylesheet completely and change your script tag to:
<script src="https://unpkg.com/docsify-copy-code"></script>
You can then also remove the part where you explicitly ran window.DocsifyCopyCodePlugin.init()
since version 2 of this plugin does that for you now. Just be sure to add the script tag below the docsify configuration object.
Thanks for the instructions on how to get this working with the new version. Just wanted to note though that you now need to load the js file after window.$docsify
whereas before it worked before.
It's not working for me
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Programming tips</title>
<link rel="icon" href="docs/_media/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="keywords" content="doc,programming,dotnet,goodpractices,mvc,tips,geeks,geeksltd">
<meta name="description" content="Programming tips">
<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">
<link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
</head>
<body>
<div id="app">Loading ...</div>
<script>
window.$docsify = {
notFoundPage: 'docs/_media/404.md',
auto2top: true,
executeScript: true,
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
name: 'Programming Tips',
search: {
noData: {
'/': 'No results!'
},
paths: 'auto',
placeholder: {
'/': 'Search'
}
},
formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
var url = 'https://github.com/geeksltd/Programming.Tips/blob/master/' + vm.route.file
var editHtml = '[:memo: Edit Document](' + url + ')\n'
return editHtml
+ html
+ '\n\n----\n\n'
+ '<a href="https://www.geeks.ltd.uk/" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by Geeks Ltd</a>'
})
},
window.DocsifyCopyCodePlugin.init()
]
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify-copy-code/"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-csharp.min.js"></script>
</body>
</html>
You're still manually loading the css file and also calling the plugin init() - remove those and it should work.
the css file is not loaded
the css file is not loaded
line #12 of @mohsens22 's code above is:
<link rel="stylesheet" href="//unpkg.com/docsify-copy-code/styles.css">
@adrianbj Just seen, the source code has CSS code
I removed them the error is gone but the plugin does not seem to work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Programming tips</title>
<link rel="icon" href="docs/_media/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="keywords" content="doc,programming,dotnet,goodpractices,mvc,tips,geeks,geeksltd">
<meta name="description" content="Programming tips">
<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">
</head>
<body>
<div id="app">Loading ...</div>
<script>
window.$docsify = {
notFoundPage: 'docs/_media/404.md',
auto2top: true,
executeScript: true,
loadSidebar: true,
mergeNavbar: true,
maxLevel: 4,
subMaxLevel: 2,
name: 'Programming Tips',
search: {
noData: {
'/': 'No results!'
},
paths: 'auto',
placeholder: {
'/': 'Search'
}
},
formatUpdated: '{MM}/{DD} {HH}:{mm}',
plugins: [
function (hook, vm) {
hook.beforeEach(function (html) {
var url = 'https://github.com/geeksltd/Programming.Tips/blob/master/' + vm.route.file
var editHtml = '[:memo: Edit Document](' + url + ')\n'
return editHtml
+ html
+ '\n\n----\n\n'
+ '<a href="https://www.geeks.ltd.uk/" target="_blank" style="color: inherit; font-weight: normal; text-decoration: none;">Powered by Geeks Ltd</a>'
})
}
]
}
</script>
<script src="//unpkg.com/docsify-copy-code/"></script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<script src="//unpkg.com/prismjs/components/prism-csharp.min.js"></script>
</body>
</html>
Hi @mohsens22
You'll need to put the script tag below the docsify.min.js
one like you have with the other plugins. Can be above or below search.min.js
.
Also, I'm not 100% sure if it would make a difference, but there shouldn't be a /
at the end, the script tag should look like this:
<script src="https://unpkg.com/docsify-copy-code"></script>
doesn't work
Now it does work
Thanks @jperasmus - that fixes it...and I can confirm that the /
at the end of the line will break it.
FYI...
The new URL allows unpkg.com to redirect requests to the appropriate file. This is better than linking directly to file because a developer may change file names or locations. Using the redirect makes this a non-issue.
As for the trailing slash...
Appending a @[number]
after the package name let's you specify a package version:
😄
This completely broke my docsify site, only the index was working.
Thanks for the fixes, hope it can be avoided in the future.
@gcphost Apologies for the breaking change. The changes made in 2.x along with the new install instructions should prevent this from happening in future releases.
If you find yourself linking to a CDN for a production site, it's safer to link directly to a specific version instead of the latest version. Semantic versioning rules indicate that a major version change (like v1.x => v2.x) includes breaking change(s). By that logic, it would be best to swap the order of the URLs presented in the README so folks are linking specifically to v2.x instead of the latest version to prevent a similar situation happening with future releases.
FYI, we've made two small tweaks (#8) that should help alleviate the issues caused by the breaking changes in 2.0:
src
, but the site will no longer break as a result. A console message will be displayed in this scenario to let devs know that v2 has been released and new installation instructions are available.Thanks!
Refused to apply style from 'https://unpkg.com/docsify-copy-code@2.0.1/styles.css' because its MIME type ('text/plain') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
(index):1 Refused to execute script from 'https://unpkg.com/docsify-copy-code@2.0.1/index.js' because its MIME type ('text/plain') is not executable, and strict MIME type checking is enabled. (index):80 Uncaught TypeError: Cannot read property 'init' of undefined at (index):80