Block Code

Gitbook Plugin

My first package in npm. I would be grateful for any.

Plugin for formatting blocks of code in gitbook pages.

Plugin abilities:

• Adds numbering for lines of code.
• Adds a special marker for the code block in the console.
• Adds a button to copy the contents of the code block.
• Formatting the copy button.

Summary

• Install
• Plugin Config

Install

book.json

{
	"plugins": [
		"block-code"
	]
}

console

gitbook install

or

console

npm install gitbook-plugin-block-code

Plugin Config

All basic settings are default.

book.json

{
	"pluginsConfig": {
		"block-code": {
			"cloneButton": true,
			"lineNumber": true,
			"cloneButtonStyle": {
				"color": "#c1c7cd",
				"color-hover": "#c1c7cd",
				"bg": "transparent",
				"bg-hover": "transparent"
			},
			"cloneButtonIcon": {
				"clone": "fa-clone",
				"check": "fa-check"
			}
		}
	}
}

Properties

|property|default|available values| |:-:|:-:|:-| |cloneButton|true| true | false| |lineNumber|true|true | false| |cloneButtonStyle|{}|contains such fields: color, color-hover, bg,bg-hover| |color|#c1c7cd | Format HEX color and transparent| |color-hover|#c1c7cd| Format HEX color and transparent| |bg|#c1c7cd | Format HEX color and transparent| |bg-hover|#c1c7cd | Format HEX color and transparent| |cloneButtonIcon|{}|contains such fields: clone, check| |clone|fa-clone|Icon font in string format| |check|fa-check|Icon font in string format|

More Detail

1. Button for copying the contents of the block with the code.

• cloneButton
  • true
  • false

true

false

2. Numbering each line of code.

• lineNumber
  • true
  • console
  • false

true

console

false

3. Few styles for the copy button.

• cloneButtonStyle
  • color
  • color-hover
  • bg
  • bg-hover

hover

active

4. Copy and copy context icons.

• cloneButtonIcon
  • clone
  • check

In order to replace one of the icons, you need to go to the site fontawesome.com, select the necessary one and copy the class that begins with fa-*title*.

Attention! Not all icons can be displayed, be careful.

Examples of

fa-align-justify

fa-bullseye

fa-clone

fa-barn

fa-cog

fa-expande

fa-paint-brush

Creators