Add Control to set a snippet of Code

[penge]

Code Block – a new control in a Toolbar to format the selected text as a snippet of code, let it be html, css, js, or anything else.

[penge]

Preview of a Code block

Highlighting works as well

[bhupesh-sf]

I cannot see the code block border with a custom theme. Following is the custom theme settings:

`:root {

/* Scrollbar */

--scrollbar-track-background-color: #121212;
--scrollbar-thumb-background-color: grey;
--scrollbar-thumb-hover-background-color: #555;

/* Generic */

--background-color: #24292E;
--text-color: #D6D8DA;
--link-color: white;
--svg-fill-color: #626262;

/* Notifications */

--notification-border-color: transparent;

/* Overlay */

--to-create-overlay-background-color: #134e82;
--to-rename-overlay-background-color: rgba(30, 136, 229, .7);
--to-delete-overlay-background-color: rgba(255, 0, 0, .6);

/* Modal */

--modal-background-color: #222;
--modal-border-color: transparent;
--modal-input-border-color: transparent;
--modal-button-background-color: white;
--modal-button-text-color: #121212;

/* Context menu */

--context-menu-background-color: #626262;
--context-menu-text-color: white;
--context-menu-border-color: transparent;

/* Sidebar */

--sidebar-notes-background-color: #1B1D23;
--sidebar-notes-text-color: #D6D8DA;
--sidebar-active-note-background-color: #222;
--sidebar-active-note-text-color: #FFF;

/* Drag */

--drag-border-color: #454545;
--drag-resizing-border-color: white;

/* Bar */

--bar-border-color: #1B1D23;

/* Toolbar */

--toolbar-button-color: #626262;
--toolbar-button-hover-background-color: #222;
--toolbar-button-hover-color: white;

/* Only in Options */

--hotkey-background-color: #222;
--hotkey-text-color: white;

--comment-background-color: #222;
--comment-text-color: white;

--slider-background-color: white;
--slider-thumb-background-color: white;
--slider-thumb-size: 12px;
}

body {
opacity: 1;
}`

[penge]

Oh yes, there is a new section (see light.css or dark.css for reference via their links in top left right).

/* Editor */

--pre-border-color: silver;
--highlight-background-color: yellow;
--highlight-text-color: black;

I could add some sort of notification for this, like for unset variables (when new or renamed).

[bhupesh-sf]

Oh, ok. Got it. I think we need notification if new options have been added to the CSS.

[penge]

Oh, ok. Got it. I think we need notification if new options have been added to the CSS.

No problem, can have that.