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.

Example

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