/gitbook-plugin-block-code

Plugin for formatting a block of code in gitbook.

Primary LanguageJavaScriptMIT LicenseMIT

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

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

Iosif Luamoris