vuepress-theme-fuse/plugins/vuepress-plugin-fuse-tabs/lib/markdownItPlugin.js

A VuePress theme that supports Bingo Fuse Api document.

const container = require('markdown-it-container');

function getTabsAttributes(info) {
	const arr = info.split(' ');
	let result = '';
	if (arr.length > 2) {
		arr.forEach(item => {
			if (item !== '' && item !== 'tabs') {
				const attribute = item.split(':');
				result += `${attribute[0]}="${attribute[1]}" `;
			}
		});
	} else {
		result = `type="border-card"`;
	}
	return result;
}

function getTabAttributes(info) {
	const arr = info.split(' ');
	const last = arr.length - 1;
	if (arr[last].trim() !== 'lazy') {
		return `label="${arr.slice(2, last + 1).join(' ').trim()}"`;
	}
	if (arr[last].trim() === 'lazy') {
		return `label="${arr.slice(2, last).join(' ').trim()}" ${arr[last].trim()}`;
	}
	return '';
}

module.exports = function tabsPlugin(md, options = {}) {
	options = options || {};

	md.use(container, 'tabs', {
		render: (tokens, idx) => {
			const token = tokens[idx];
			const attributes = getTabsAttributes(token.info);
			if (token.nesting === 1) {
				return `<Tabs ${attributes}>\n`;
			}
			return `</Tabs>\n`;
		},
	});

	md.use(container, 'tab', {
		render: (tokens, idx) => {
			const token = tokens[idx];
			const attributes = getTabAttributes(token.info);

			if (token.nesting === 1) {
				return `<Tab ${attributes}>\n`;
			}
			return `</Tab>\n`;
		},
	});
};