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

    

関連記事

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする
手順 GitLab.com のコンテナレジストリで1つのプロジェクトに複数のDockerイメージをpushする方法についてのメモです。 手順 まず、gitlab.comにて適当なリポジトリを…

JSで32ビット符号付き整数に対してのビット演算でハマった
具体例 参考にしたサイト JSでサブネットマスクの計算を行おうとしたとき、ビット演算でハマりました。その時のメモです。 JSでサブネットマスクの計算 JSでビット演算子を利用する場合 3…

Gitにプロキシを設定する
プロキシを設定する 確認 Gitでプロキシを通しておくメモです。 プロキシを設定する 以下のコマンドでproxyを通します。 ※ がプロキシのURL…

プログラムの数値計算で発生する誤差の種類 丸め誤差・打ち切り誤差・桁落ち
はじめに 誤差の種類 丸め誤差 打ち切り誤差 桁落ち 情報落ち 桁溢れ誤差 参考にしたサイト コンピュータで出てくる誤差はいくつかありますが、 それらをコードに落として整理しました。 はじめに 例えば の計算の答えは 0.6666666666…

JSでサブネットマスクの計算
JSによるサブネットマスク関連の計算 IPv4アドレス文字列をNumber型に変換する CIDR と サブネットの相互変換 ネットワークアドレス と ブロードキャストアドレス クラス 改めて計算方法を整理する 参考にさせていただいたサイト JSでIPv…

AWS Amplify に Next.js (SSG) で作ったアプリをデプロイする
はじめに 操作 Next.js (React) アプリの作成、Gitへのプッシュ AWS Amplifyでプロジェクト作成 参考にしたサイト この記事では、React / Next.js アプリケーションを作成し、AWS Amplify…

Typescriptに入門した
初期作業 とりあえずHello World 初期作業 typescript環境を作っていきます。 とりあえずHello World まず、次のサンプルコードを作成します。 typescriptファイルをビルドします。

Vue/Nuxt.js 触ってた人が Next.js に入門する
はじめに 実施環境 学習ガイド Create a Next.js App Navigate Between Pages ページの作成 リンク Assets, Metadata, and CSS Assets メタデータ CSS…

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

最新の投稿

Node.js で作成した REST API を Docker化
Node.jsでREST APIを作成 コンテナ化 コンテナ化定義 コンテナ化作業 参考 Node.js で作成した REST API を Docker化した際のメモです。 Node.jsでREST APIを作成 まずはNode.js…

JavaScriptで優先度付きキューを実装する
優先度付きキューについて ソース 参考 JavaScriptで優先度付きキュー (プライオリティキュー) を実装する 優先度付きキューについて 具体的には次のような機能があります。 キューに対して要素を優先度付きで追加 (push…

AWS Amplify で コンテナベースのデプロイを行い REST API を構築
検証した環境 やってみる 初期準備 パイプラインを確認 終了処理 参考 AWS Amplify で コンテナベースのデプロイを行い REST API を構築した際のメモです。 検証した環境 amplify 5.1.…

Pythonでソケット通信を実装しメッセージの送受信を行う
ソース server.py client.py 動かしてみる 参考 Pythonでソケット通信を実現する方法です。 ソース server.py サーバ側のソースです。 client.py…

next_permutationをJSで実装する
ソース 使い方 参考 C++で提供されている順列を生成する next_permutation のJS実装です。 ソース 順列が存在する場合はtrueを返し、そうでなければfalse…

応用情報技術者試験の合格体験記
受験時のステータス 受験結果 対策 スケジュール 午前問題 午後問題 参考書等 令和…

[JS]ラジアンから度数に度数からラジアンに変換する
コード 度数からラジアンへ ラジアンから度数へ サンプル ラジアンから度数に度数からラジアンに変換する際のスニペット。 コード 度数からラジアンへ ラジアンから度数へ サンプル

CentOS8 に Python + OpenCV をインストール
インストール テスト CentOS8 で標準で提供されているパッケージで Python + OpenCV 環境を構築する方法です。 検証した環境は CentOS8.3 (Docker) です。 インストール まず opencv…

[Perl] CentOS8 に plenv をインストール
インストール Step1 事前準備 Step2 PATHを通す (README通りにインストール) Step2 PATHを通す ($HOME以外にplenvをインストール) Step3 Perlインストール Step4 cpanmインストール CentOS…

JS/TSのclassでclass名を取得する
コード JS/TSのconstructorを利用して自分自身のクラス名を取得する際のメモ。 コード このコードの結果は次のようになります。

Tags

Dates

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