jhildenbiddle / docsify-tabs Goto Github PK
View Code? Open in Web Editor NEWA docsify.js plugin for rendering tabbed content from markdown
Home Page: https://jhildenbiddle.github.io/docsify-tabs/
License: MIT License
A docsify.js plugin for rendering tabbed content from markdown
Home Page: https://jhildenbiddle.github.io/docsify-tabs/
License: MIT License
Hi.
Created File test/test.md
<!-- tabs:start -->
#### **English**
Hello!
#### **French**
Bonjour!
#### **Italian**
Ciao!
<!-- tabs:end -->
Then another file main.md
#Start
[filename](test/test.md ':include')
#End
In this case tabs are not rendered.
Am I doing something wrong, or this is not supported?
Please see here for a detailed description
docsifyjs/docsify#2000
Search plugin is not able to search in the tabs tables.
After the release of latest version, the first tab is not opened per default anymore.
To reproduce this, go to the docs.
I get this error in the console, see screenshot:
This new change stems from the change introduced yesterday.
Now as far as I understand, the code expects an anchorID to be always present, which might not be the case all the time.
The issue comes from this line more specifically
const anchorID = (window.location.hash.match(/(?:id=)([^&]+)/) || [])[1];
If we find a match, okay, the return the name of the match, like for an url somethig/README?id=linux
that would return linux
.
But if this line does not find a match, then it does return an empty array, and you cant take the first element of an empty array []
, since there is no first element.
Now all of the tabs are closed because this fails and anchorID returns undefined
, to which you can't apply indexOf
.
Tldr; if there is no match for an id in the url, then the tabs will be not opened because it fails with an error.
I've submitted a PR for this, please check if I am not breaking any functionality with this. It seems to be working fine with the changes applied.
Hello,
First of all, thanks for everything you've done for Docsify !!
I recently updated "Docsify-tabs" from v1.4.4 to v1.6.0 and encountered an issue.
I have a two tabs set-up on a page that appears selected with the class "docsify-tabs__tab docsify-tabs__tab--active", but when browsing to another page and coming back, both tabs appears unselected (class "docsify-tabs__content").
Would anyone have any general idea that could be causing this ?
In case of:
I'm using the "vue" theme and running those plugins :
I will continue to look into this issue and will update if I find anything.
Thanks :)
Hello, I'm using docsify-tabs follow config: ( but when i try to get file from local, it work )
window.$docsify = {
loadSidebar: true,
notFoundPage: "404.md",
homepage: "https://ngthtung.github.io/docs/README.md",
basePath: "https://raw.githubusercontent.com/ngthtung/docs/master/",
subMaxLevel: 2,
tabs: {
persist: true, // default
sync: true, // default
theme: "classic", // default
tabComments: true, // default
tabHeadings: true // default
}
};
this is my demo:
https://gqhzr.csb.app/#/test.md
Hi, I found that the tabs won't show on pages set via the alias.
For example, if I have some tabs in an markdown from an external github repo, and I used the markups for tab, it doesn't work:
window.$docsify = {
alias: {
'/changelog':
'https://raw.githubusercontent.com/docsifyjs/docsify/master/CHANGELOG',
},
};
If I copy and paste the same content to a relative file path under the current folder, then it works.
Here is a real example using alias and the tabs failed to render, and this is a working example.
Hello,
We use Docsify tabs in our technical documentation for various purposes. In our applications, we redirect to the documentation to specific sections, and sometime to headers inside tabs.
The problem is that the redirection to the tab doesn't seem to work properly. The tab is not auto selected. We're either redirected to the default tab or to the one selected during the last navigation (due to the persist option).
I have the routermode set to "history" mode, can this be related to this ? (I bring this up based on issue34
Is there any way to manage that type of situation ?
Thanks
EDIT : It would seem that indeed, replacing "window.location.hash" with "window.location.search" in the Docsify Tabs plugin fixes the problem for "Routermode: History" and allows redirection.
<!-- tabs:start -->
# **Tab 1**
Test 1
# **Tab 2**
Test 2
<!-- tabs:end -->
Note that the end of # **Tab 1**
no space exists while at the end of **Tab 2**
there is an additional space
Only tab 1 is displayed, tab 2 is displayed inline without any tab
The additional space at the end of tab 2 should be trimmed and both tabs should be displayed properly
Directly accessing through the link will cause the title positioning to be lower...
example link:
http://locaohost:3000/#/xxx?id=title4
md:
## title1
.....
<!-- tabs:start -->
## **title2**
.....
## **title3**
.....
<!-- tabs:end -->
## title4
It is OK to access title 1 through the link, but the location of title 4 will be inaccurate. And the title in the tab cannot be located and displayed in the table of contents
With docsify 4.6 it is now possible to embed any type of file, including a markdown file.
If a tab-set is added to the parent file it works fine. However a tab-set added to an embedded file does not render.
tabs-main.md
# tabs-main.md
<!-- tabs:start -->
#### ** English **
Hello!
<!-- tabs:end -->
[filename](tabs-include.md ':include')
tabs-include.md
# tabs-include.md
<!-- tabs:start -->
#### ** English **
Hello!
<!-- tabs:end -->
For example, this link https://jhildenbiddle.github.io/docsify-themeable/#/markdown?id=tables
doesn't lead to the desired section 'Tables'. The page hasn't been scrolled to the correct position, which is annoying.
The original docsify project doesn't suffer from this issue, see
https://docsify.js.org/#/write-a-plugin?id=edit-button
Maybe I've missed it somewhere, but it would be cool to be able to link to a tab section and to an active tab.
Having a link to http://localhost:3000/#/newPage?id=windows
And it jumping to the newPage
document, and activating the windows
tab
Vue.css theme is not supported, Do you plan to adapt to this theme?
link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify/themes/vue.css"
Hello,
We've experienced a bug with tab switching - when there's an opening heading inside of a tab and you switch tabs, the heading is going to flicker.
Video showing the issue: https://streamable.com/zbilpc
Browsers used: Firefox 70.0, Chromium 76.0.3809.100
How to reproduce: Put a heading inside of a tab (as its first content), switch tabs and notice the heading flickering
We also prepared a repo allowing you reproduce it easily - you can just clone it and run: https://github.com/brcdev/docsify-tabs-bug-demo
Thank you,
Emil
Is there any way to disable orange border when tab selected ? It's also appear in your examples.
if you put tabs in the quote, its style will get broken
Can you support the refresh to locate the specific location of the page, or tell me the solution?
Hi, I'm writing document template with docsify-mustache, but unfortunately it doesn't seem to work normally. Specifically, the tag content can be rendered but cannot be clicked to jump to the corresponding label.
---
# YAML info
Branch: [A, B, C]
---
<!-- tabs:start -->
##### **{{Branch.0}}**
contents1
##### **{{Branch.1}}**
contents2
##### **{{Branch.2}}**
contents3
<!-- tabs:end -->
The reason for incompatibility may be that the value of the data-tab
label is not given correctly.
Hope you to support this feature, or provide some guides so that I can fix it by myself. Thx a lot. ❤️
I saw you offered to migrate your plugin to VuePress (vuejs/vuepress#851)
Did you use VuePress for anything or what was your intention to do the port?
What do you think about VuePress (now)?
You can try this code: https://hastebin.com/dewobogepe.md
and this is image https://imgur.com/a/GRTbqkH - sorry for late respone and the other website is down because i upload it to main domain and removed the plugin. (Still need to use)
Hello, I have tabs set up like this:
<!-- tabs:start -->
#### Manage
![Screenshot](assets/img/img1.jpg)
#### Deploy
![Screenshot](assets/img/img2.jpg)
<!-- tabs:end -->
Renders as: (screenshots redacted)
In index.html,
window.$docsify = {
...
tabs: {
persist : true, // default
sync : true, // default
theme : 'classic', // default
tabComments: true, // default
tabHeadings: true // default
},
}
<!------------->
<!-- PLUGINS -->
<!------------->
<!-- Docsify v4 -->
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
...
<!-- docsify-tabs (latest v1.x.x) -->
<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
I also have in the HEAD section of index.html:
<style>
:root {
--docsifytabs-border-color: #ededed;
--docsifytabs-tab-highlight-color: purple;
}
</style>
Am I missing something with this?
Examples
<!-- tabs:start -->
<!-- tab:title1 -->
```css
.aa{color:#aaa}
```
<!-- tab:title2 -->
bbb
<!-- tabs:end -->
After tabs uses HTML comments, the code block will be parsed incorrectly, resulting in page display disorder.
First off, thanks for making this plugin!
While we've been using docsify and this plugin for our documentation we've noticed that following anchors to specific sections on longer pages doesn't properly navigate you to that section (e.g. https://yuzudocs.balanced.dev/#/definition/markup?id=enum). Turning off docsify-tabs however remedies this problem as content is no longer disappearing into tabs.
Not sure if I'm missing the obvious solution or not, but is there anything that could be done to maintain the scroll position after docsify-tabs has finished arranging content?
If not we may just split out our content into multiple pages so the issue is less pronounced, or if we're desperate we'll just try something along the lines of adding a custom plugin to the docsify setup with a horrible setTimeout
with an arbitrary 1 second value to wait for the page & docsify-tabs to fully load, then scroll to the correct section.
plugins: [
function (hook, vm) {
hook.doneEach(function () {
const id = vm.route.query.id;
const element = id ? document.querySelector(`[data-id="${id}"]`) : undefined;
if (element) {
setTimeout(function() {
element.scrollIntoView();
}, 1000);
}
});
}
]
Thanks in advance
In the process of setting up an alternative version of markdown.md
visible here:
https://docs.1zm.in/#/markdown
markdown.md code here
i realized that the tabs don't quite look right if you nest them:
https://docs.1zm.in/#/nestedtabs
First Tab looks quite broken:
The last tab almost looks ok:
So it seems that it might only need small adjustments to work correctly.
hi, i think that array index is wrong to render tabs with comments
I tested reduce index 2 to 1 and index 3 to 1.
Line 101 in f6073bc
Hi, do you know if there's a way to sync tabs between multiple pages instead of just one page?
Create an index.html with the following content as per the instructions of both plugins:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'name',
plugins: [
EditOnGithubPlugin.create('docBase', docEditBase', 'title')
],
repo: 'repo',
tabs: {
persist: true, // default
sync: true, // default
theme: 'classic', // default
tabComments: true, // default
tabHeadings: true // default
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
</body>
</html>
docsify-tabs are not rendered properly
Defining plugins
in window.$docsify
declaration overwrites docsify-tabs declaration
Use instead the following syntax for index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/docsify@4/lib/themes/vue.css">
</head>
<body>
<div id="app"></div>
<script>
window.$docsify = {
name: 'name',
repo: 'repo',
tabs: {
persist: true, // default
sync: true, // default
theme: 'classic', // default
tabComments: true, // default
tabHeadings: true // default
}
}
</script>
<script src="//cdn.jsdelivr.net/npm/docsify@4"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<script src="//cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
<script>
window.$docsify.plugins.push(
EditOnGithubPlugin.create('docBase', 'docEditBase', 'title')
);
</script>
</body>
</html>
I would kindly suggest docsify-tabs documentation be amended to draw the user's attention to the risk of overwriting docsify-tabs plugin when defining plugins
in window.$docsify
declaration
I am trying to do something like button # ID when click to the link it will auto redirect to that button and that line ID
Due to the use of multiple "tags" in the note and different content lengths, there may be a problem of view jumping up and down during the synchronization switching process. Can this feature be disabled separately in specific note? (tabs.sync)
In addition, this plugin is quite good. Thank you to the author for sharing it.
If u put the tabs at the bottom of the page it will stuck hard and didnt create scroll bar. (easiest way to see is using a phone)
I am using .md
e.g: http://neetvn.net/#/species/casau
For now i use tag right after it to make it move down. or else it will stuck
Here is the case, I am write api document, I named multiple request/response with docsify-tabs, e.g.,
method1
request/response
....
method2
request/response
...
When I click the tab 'response' of method1, the tabs 'response' for both method1 and method2 are both changed, but I do want the tab of method1 change only.
How to lock the other homonymic tabs and change only 1 tab? Thanks in advance!
One workaround is to keep tab name unique, but I need to keep the tab names as same in my cases.
hi, I found a bug according to the title.
For example, if you go directly to the URL below, the tab will not be displayed.
http://localhost:3000/#/hoge?id=%e3%81%82
It worked in version 1.2.0, but not in 1.3.0 or later.
JavaScript throws an error in the following part
Line 240 in 3c8c6f9
Hi,
Your tabs plug-in is lovely. I use it a lot to let readers see the appropriate fragments for their language and framework.
As you can see below, I add a small dummy tab in the front ("...") allowing users to make their selection explicitly. The other tabs are actually quite long and can be overwhelming, especially if that information is not relevant for that reader.
<!-- tabs:start -->
### **...**
*Select your language and framework.*
### **Typescript**
![anonymous-call.ts](anonymous-call.ts ':include :type=code')
### **Java**
![anonymous-call.java](anonymous-call.java ':include :type=code')
### **Ruby**
![anonymous-call.rb](anonymous-call.rb ':include :type=code')
<!-- tabs:end -->
This dummy-tab pattern occurs quite a lot, but it would be obsolete if all tabs were "inactive" by default. It would be beautiful if clicking an already "active" tab again would make it "inactive" again as well. It would also be useful if the default state for tabs ("collapsed" or "expanded") would be configurable via the plugin config.
Is this feature easy to add? Or would you be open to a Pull Request? What would be the best way to annotate which tab (if any) should be active by default, in a certain tab block?
After using your plugin, when I write code like this
<!-- eg.md -->
<!-- tabs:start -->
## **baidu**
## 一
Here are some introductions
## 二
Here are some introductions
## **google**
## 三
Here are some introductions
## 四
Here are some introductions
<!-- tabs:end -->
The table of contents for this article will be automatically generated on the sidebar ,like this
When the tab selects'baidu', I can only click on the'一' and'二' in the sidebar. When clicking on the'三' and'四', it will not automatically switch to the'google' tab
('一' means one,'二' means two,'三' means three, '四' means four)
I think this is because I used the Chinese title. When I click on the Chinese title, such as "三", I actually visited eg?id=%e4%b8%89,it is the text after UrlEncode encoding, not the original text,it may be because of this encoding that the tab will not change automatically
Hope you can fix this problem, thx
Change
I wanted to make my sidebar tabbed, but it appears to have no effect in there.
<!-- tab:Example **manifest.webmanifest** -->
Doesn't render as Example <strong>manifest.webmanifest</strong>
, but as Example **manifest.webmanifest**
. Using the "bold heading" method also ignores any markup.
I can't get into the homepage.
Hi,
I had a little issue with your plugin : the markdown files saved yith windows style linebreaks (\r\n) were not correctly detected and parsed. I fixed it by making a quick hack on the regexes :
codeMarkup: new RegExp(/(```[\s\S]*?```)/gm),
commentReplaceMarkup: new RegExp("\x3c!-- " + commentReplaceMark + " (.*) --\x3e"),
tabBlockMarkup: /^(<!-+\s+tabs:\s*?start\s+-+>)[\r\n]+([\s|\S]*?)[\r\n]+(<!-+\s+tabs:\s*?end\s+-+>)/m,
tabCommentMarkup: /^<!-+\s+tab:\s*(.*)\s+-+>[\r\n]+([\s\S]*?)[\r\n]+(?=<!-+\s+tabs?:)/m,
tabHeadingMarkup: /^#{1,6}\s*[*_]{2}\s*(.*[^\s])\s*[*_]{2}[\r\n]+([\s\S]*?)(?=#{1,6}\s*[*_]{2}|<!-+\s+tabs:\s*?end\s+-+>)/m
Basicly replacing the \n+
by [\r\n]+
I may have missed a spot but it seam to work for me this way
Anyway, thanks for your great work !
Try the following markdown file:
https://pastebin.ubuntu.com/p/Q3DPwsdRPY/
Plugin will not parse the code blocks as we excepted.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.