gitbookで使えそうなプラグインを集めて見た

2019-06-05
node.jsgitgitbookgraphvizplantumluml
    

目次

概要

gitbookで使えそうなプラグインを集めて見ました。 なお、下記の内容はgitbookが導入されていることを前提としています。

https://tech-blog.s-yoshiki.com/2019/06/1254/

目次の折りたたみ - expand-active-chapter

目次の折りたたみができるプラグインです。

インストール

npm i gitbook-plugin-expand-active-chapter

設定

book.jsonに次のように記述します。

{
    "plugins": ["expand-active-chapter"]
}

参考

https://www.npmjs.com/package/gitbook-plugin-expand-active-chapter

コードハイライト - gitbook-plugin-prism

デフォルトのコードハイライトを無効にするとともに、オリジナルのスタイルを適用することができます。

この画像オリジナルのスタイルを適用したコードハイライトの一例です。

インストール

npm i gitbook-plugin-prism

参考

https://www.npmjs.com/package/gitbook-plugin-prism

ツリービュー

この画像のようにメニューをツリー構造で表示します。

インストール

npm i gitbook-plugin-page-treeview

設定

book.jsonに記述する設定の一例です。

{
    "plugins": [
        "page-treeview"
    ],
    "pluginsConfig": {
        "page-treeview": {
            "copyright": "Copyright © aleen42",
            "minHeaderCount": "2",
            "minHeaderDeep": "2"
        }
    }
}

参考

https://www.npmjs.com/package/gitbook-plugin-page-treeview

UML - gitbook-plugin-uml

gitbook-plugin-umlは UMLを作成するPlantUMLをgitbook上で表示するためのプラグインです。

インストール

gitbook-plugin-uml を npmでインストールします。

$ npm install gitbook-plugin-uml

book.json は次のように記述します。

{
  "plugins": ["uml"]
}

UMLにはオプションを加えることができ、次のように記述します。

"pluginsConfig": {
  "uml": {
    format: "png",
    nailgun: false
  }
}

Nailgun ? また、上記の作業を進める前提としてgraphvizのインストールが必要です。

Mac

 $ brew install graphviz

Linux

 $ sudo apt install graphviz

or

 $ sudo yum install graphviz

表示

uml か puml でコードブロックとして囲みます。

@startuml

	Class Stage
	Class Timeout {
		+constructor:function(cfg)
		+timeout:function(ctx)
		+overdue:function(ctx)
		+stage: Stage
	}
 	Stage <|-- Timeout

@enduml

参考

https://github.com/vowstar/gitbook-plugin-uml

http://plantuml.com/ja/

https://qiita.com/tatsuya_oyanagi/items/db53157640d59572eac5

favicon - gitbook-plugin-custom-favicon

オリジナルのfaviconを利用するプラグイン

インストール

npm install gitbook-plugin-custom-favicon

設定

book.jsonに次のように記述します。 path/to/favicon.ico には置き換えたいfaviconのパスを記述します。

{
	"plugins" : ["custom-favicon"],
	"pluginsConfig" : {
		"favicon": "path/to/favicon.ico"
	}
}

参考

https://github.com/Bandwidth/gitbook-plugin-custom-favicon

インストール

npm i gitbook-plugin-insert-logo

設定

book.jsonに次のように記述します。 urlの部分はbase64にすることも可能です。

{
    "plugins": ["insert-logo", "another plugin 1", "another plugin 2"],
    "pluginsConfig": {
        "insert-logo": {
            "url": "http://www.example.com/my-logo.png",
            "style": "background: none;"
        }
    }
}

参考

https://github.com/matusnovak/gitbook-plugin-insert-logo

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

GitLab API の 簡単な使い方
原則:アクセストークン 原則:ページネーション プロジェクトを取得する プロジェクト一覧表示 指定IDのプロジェクトを表示 その他 グループを取得する その他 ユーザの取得 ユーザ一覧 ユーザ詳細 その他、独立したAPI GitLabではREST API…

JavaScriptでbig-integerでできること
定数 メソッド abs add, plus and bitLength compare compareTo compareAmb divide, over divmod equals, eq greater, gt greaterOrEquals, geq…

Gitの初心者向け入門資料を集めてみた
バージョン管理システムとして利用される事が多いGitですが、初心者には意外とハードルが高かったりするため、初心者向け入門資料を集めてみました。 Git入門資料 https://gist.github.com/s-yoshiki/3ef9bfde7c0b…

エンジニアなMacBookのセットアップ 開発環境の構築
ブラウザ関連 Homebrewのインストール ターミナル環境系 Hyper エディタ VSCode typora CLIツール Git 言語系 Python node.js MacBookPro…

GitHub の CONTRIBUTING には何を書けばいいのか?
はじめに サンプル js-primer 参考 はじめに GitHubのOSSプロジェクトを見ているとリポジトリのルート直下に存在する CONTRIBUTING.md というファイルをよく目にします。 これは、OSS…

gitbookを使ってドキュメントを生成する
どんなものができるのか 検証した環境 gitbookのインストール プロジェクトの作成 ディレクトリ構成について ドキュメントの記述 日本語化 ビルドインサーバの起動 ビルドとHTMLの生成 PDFの生成 参考 GitBook…

Ubuntuにnパッケージでnode.js環境をセットアップする
検証環境 nodejs npm のインストール TLSエラーの回避 参考 Ubuntuにnode.js環境をセットアップする方法です。 aptで入れようとするとバージョンが古かったり、コマンドがnodejsだったり色々と面倒なので、 n…

VSCodeからSSHでリモートサーバ上のファイルを編集する
SSHによるリモート開発について 機能の 機能要件 ローカル環境 リモート環境 Macから試したてみた 環境 VS Code Insider build SSH:Remoteのインストール ssh_configの設定 VSCode…

最新の投稿

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

ハイフンとかマイナスとかダッシュとか

Tags

Dates

© 2020   404 motivation not found