gitbook-plugin-prism-codetab-fox v0.0.4
Prism Code Tab
Gitbook Plugin for Prism and support code tabs with custom configuartion name.
Integrate gitbook-plugin-prism and gitbook-plugin-codetabs into one plugin，it not only highlight code using Prism, but can also using Tabs to group these code blocks.
Installation
Adds the plugin to your book.json, then run gitbook install if you are building your book locally.
{
"plugins": ["prism-codetab-fox"]
}Usage
Each code block will render as a tab,the tab name is the language by default,but we can show custom tab name in each code block by using a codeTabSepearator.
The default value of codeTabSepearator is ::, we can set a global value via book.js or set a custom value in each tab group as below:
{% codetab codeTabSeperator="#" %}
```javascript
// code block
```
```swift#IOS Develop
// code block
```
```java#Java Guide
// code block
```
{% endcodetab %}Priority order is Custom config > Global config > Default config
Default config
Source code:
{% codetab %}
```javascript
import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, window.document.getElementById('root'));
```
```swift
let s: String = "sample";
```
```java::Java Guide
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
{% endcodetab %}Display result:
Global config
Config code:
"prism": {
"ignore": [
"mermaid",
"eval-js",
"flow"
],
"css":[
"prismjs/themes/prism-solarizedlight.css"
],
"codeTabSeperator":"$"
}Source code:
{% codetab %}
```javascript
import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, window.document.getElementById('root'));
```
```swift$IOS Develop
let s: String = "sample";
```
```java$Java Guide
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
{% endcodetab %}Display result:
Custom config
Source code:
{% codetab codeTabSeperator="#" %}
```javascript
import * as React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, window.document.getElementById('root'));
```
```swift#IOS Develop
let s: String = "sample";
```
```java#Java Guide
class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello, World!");
}
}
```
{% endcodetab %}Display result: