0.0.1 • Published 3 years ago

gitbook-plugin-block-code v0.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

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

propertydefaultavailable values
cloneButtontruetrue | false
lineNumbertruetrue | false
cloneButtonStyle{}contains such fields: color, color-hover, bg,bg-hover
color#c1c7cdFormat HEX color and transparent
color-hover#c1c7cdFormat HEX color and transparent
bg#c1c7cdFormat HEX color and transparent
bg-hover#c1c7cdFormat HEX color and transparent
cloneButtonIcon{}contains such fields: clone, check
clonefa-cloneIcon font in string format
checkfa-checkIcon 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