GitBook plugin for platform-specific content tabs (Android, iOS, HarmonyOS) with multi-language code samples support
npm install gitbook-plugin-platform-tabsA GitBook plugin for displaying platform-specific content with tabbed interfaces. Supports Android, iOS, and HarmonyOS with multi-language code samples (Java/Kotlin, Objective-C/Swift, TypeScript/JavaScript).
- Single-level platform tabs: Switch between Android, iOS, and HarmonyOS content
- Two-level code sample tabs: Platform tabs with nested language tabs for code examples
- Mintlify-inspired design: Clean, modern UI with smooth transitions
- Responsive: Works on desktop and mobile devices
- Print-friendly: All content visible when printing
``bash`
npm install gitbook-plugin-platform-tabs
Add the plugin to your book.json:
`json`
{
"plugins": ["platform-tabs"],
"pluginsConfig": {
"platform-tabs": {
"defaultPlatform": "Android",
"platforms": ["Android", "iOS", "HarmonyOS"]
}
}
}
Use the platformtabs block to display platform-specific content:
`markdown`
Android specific content here...
iOS specific content here...
HarmonyOS specific content here...
Use the codesample block for code examples with platform and language tabs:
`markdown`java`
// Java code example`kotlin`
// Kotlin code example`objectivec`
// Objective-C code example`swift`
// Swift code example`
You can also use Liquid tag syntax:
`markdown`
{% platformtabs id="my-tabs" %}
{% platform "Android" %}
Android content
{% endplatform %}
{% platform "iOS" %}
iOS content
{% endplatform %}
{% endplatformtabs %}
`markdown`
{% codesample id="code-example" %}
{% platform "Android" %}
{% lang "Java" %}java`
// Java code`
{% endlang %}
{% lang "Kotlin" %}kotlin`
// Kotlin code`
{% endlang %}
{% endplatform %}
{% endcodesample %}
The plugin includes built-in CSS with a Mintlify-inspired design. The styles include:
- Platform tab headers with icons (Font Awesome)
- Language tab pills for code samples
- Responsive layout for mobile devices
- Print styles for offline reading
Font Awesome icons are used:
- Android: fa-android (green)fa-apple
- iOS: (black)fa-mobile
- HarmonyOS: (red)
``
┌─────────────────────────────────────────────────────────┐
│ [Android] [iOS] [HarmonyOS] │
├─────────────────────────────────────────────────────────┤
│ Android specific content here... │
│ │
└─────────────────────────────────────────────────────────┘
``
┌─────────────────────────────────────────────────────────┐
│ [Android] [iOS] [HarmonyOS] │
├─────────────────────────────────────────────────────────┤
│ [ Java ] [ Kotlin ] │
│ ───────────────────────────────────────────────────────│
│ java │`
│ // Java code example │
│ │`
└─────────────────────────────────────────────────────────┘
``
gitbook-plugin-platform-tabs/
├── index.js # Main plugin file
├── package.json # NPM package configuration
├── README.md # This file
├── assets/
│ ├── platform-tabs.js # Client-side JavaScript
│ └── platform-tabs.css # Styles
└── utils/
└── defined.js # Utility functions
`bash`
npm install
To test the plugin in your GitBook project:
`bash`
cd /path/to/your/gitbook-project
npm install /path/to/gitbook-plugin-platform-tabs
Then add it to your book.json` plugins list.
MIT