Tips on Using Rich Text Editor / Code Editor / Markdown Editor

Keeping track of tips / Keyboard shortcuts for Lexcial Editor, Code Editor, and Markdown editor. Should also give tips on how to best use the article builder.

Date Created:

Last Edited:

Rich Text Editor Tips

Lexical Keyboard Shortcuts

Lexical Keyboard Shortcuts:
Keyboard Shortcut:	Effect:	Additional Info:
Format Text Commands
`CTRL + B`	Bold Text	N/A
`CTRL + I`	Italicize Text	N/A
`CTRL + U`	Underline Text	N/A
`Alt+T+C`	Inline Code	N/A
`Alt+T+Q`	Inline Quote	N/A
`Alt+T+S`	Strokethrough Text	N/A
`Alt+T+T`	Clear Text Formatting	N/A
`Alt+T+B`	Subscript Text	N/A
`Alt+T+P`	Superscript Text	N/A
`Alt+S+C`	Caption Size Text	Set the CSS font-size property
`Alt+S+V`	Body2 Size Text
`Alt+S+B`	Body2 Size Text
`Alt+S+6`	h6 Size Text
`Alt+S+5`	h5 Size Text
`Alt+S+4`	h4 Size Text
`Alt+S+3`	h3 Size Text
`Alt+S+2`	h2 Size Text
`Alt+S+1`	h1 Size Text
`Alt+S+I`	Inherit Text Size
`Alt+W+1`	Font Weight: 100	Set the CSS font-weight property
`Alt+W+2`	Font Weight: 200
`Alt+W+3`	Font Weight: 300
`Alt+W+4`	Font Weight: 400
`Alt+W+5`	Font Weight: 500
`Alt+W+6`	Font Weight: 600
`Alt+W+7`	Font Weight: 700
`Alt+W+I`	Inherit Font Weight
`Alt+A+L`	Align Content Left	Align Block Level Content. Affects the CSS text-align property
`Alt+A+C`	Align Content Center
`Alt+A+R`	Align Content Right
`Alt+A+J`	Align Content Justify
Insert Content
`Shift + Enter`	New Line	N/A
`Enter`	New Paragraph	N/A
Convert Content
`Alt+P`	Convert the current heading node to paragraph	N/A
`Alt+H+1`	Convert the current heading node / paragraph node to element	N/A
`Alt+H+2`	Convert the current heading node / paragraph node to element	N/A
`Alt+H+3`	Convert the current heading node / paragraph node to element	N/A
`Alt+H+4`	Convert the current heading node / paragraph node to element	N/A
`Alt+H+5`	Convert the current heading node / paragraph node to element	N/A
`Alt+H+6`	Convert the current heading node / paragraph node to element	N/A
History Commands
`Ctrl+Z`	Undo command	N/A
`Ctrl+Y`	Redo command	N/A

Rich Text Editor Icons to Functionality

Rich Text Editor Functionality
Icon:	Purpose:
	Insert Header Element <h1> through <h6> or paragraph
	Change background color of selected text
	Change text color of selected text
	Change the background color, default text color, border, outline, and box shadow of the selected paragraph, heading, or list element.
	Undo
	Redo
	Clear Editor
	Newline
	Indent Content
	Outdent Content
	Bold Text
	Italicize Text
	Strikethrough Text
	Underline Content
	Clear text formatting. Clears bold, italics, strikethrough, and underline from selected text.
	Left Align Block Content
	Center Align Block Content
	Right Align Block Content
	Justify Align Block Content
	Superscript Text
	Subscript Text
	Add Image(s)
	Add Audio
	Add Video
	Add Gif
	Text To Speech
	Add YouTube or News Content
	Add Quote (Blockquote or Inline Quote)
	Add List
	Add Aside
	Add details element
	Add Code Content
	Add Math Content
	Add Table
	Add Horizontal Rule
	Add Paragraph at End of Editor
	Download Lexical State
	Upload Lexical State

Code Editor Tips

Hold down the

This is a reference from the code mirror website for how to include line-wrapping via CSS - if you choose to.

Code Editor Keyboard Shortcuts

Code Editor Keyboard Shortcuts:
Keyboard Shortcut:	Effect:	Additional Info:	Operating Systems*:
vsCode Keymap
`Enter`	Expand Emmet abbreviation.	N/A	All
`Ctrl+/`	Toggle Comment	Toggle Comment. Behavior can be seen on the Emmetio website.	All
`Shift+Ctrl+Y`**	Emmet Evaluate Math	Evaluate math. Behavior can be seen on the Emmetio website.	All
`Ctrl+Alt+ArrowRight`	Go To Next Edit Point	Go to next edit point. Behavior can be seen on the Emmetio website.	All
`Ctrl+Alt+ArrowLeft`	Go To Previous Edit Point		All
`Ctrl+T`	Go To Tag Pair	Go to matching tag. Allows you to quickly traverse between opening and closing tag. Behavior can be seen on the Emmetio website.	All
`Ctrl+K`	Remove Tag	Allows you to quickly remove tag. Behavior can be seen on the Emmetio website.	All
`Shift+Ctrl+.`	Select Next Item	Allows you to traverse important code elements quickly. Behavior can be seen on the Emmetio website.	All
`Shift+Ctrl+,`	Select Previous Item		All
`Ctrl+ArrowDown`	Decrement Number .01	Allows you to decrement / increment number .01, 1, or 1. Behavior can be seen on the Emmetio website.	All
`Ctrl+ArrowUp`	Increment Number .01
`Ctrl+Alt+ArrowDown`	Decrement Number 1
`Ctrl+Alt+ArrowUp`	Increment Number 1
`Shift+Ctrl+ArrowDown`	Decrement Number 10
`Shift+Ctrl+ArrowUp`	Increment Number 10
Default Keymap
`Ctrl-ArrowLeft`	Cursor Syntx Left	Move the cursor over to the next syntactc element to the left	macOS
`Alt-ArrowLeft`	Cursor Syntx Left		windows, linux
`Ctrl-ArrowRight`	Cursor Syntax Right	Move the cursor over to the next syntactic element to the right	macOS
`Alt-ArrowRight`	Cursor Syntax Right		windows, linux
`Alt-ArrowUp`	Move Line Up	Move the selected lines up one line	All
`Alt-ArrowDown`	Move Line Down	Move the selected lines down one line.	All
`Shift-Alt-ArrowUp`	copyLineUp	Create a copy of the selected lines. Keep the selection in the top copy.	All
`Shift-Alt-ArrowDown`	Copy Line Down	Move the selected lines down one line.	All
`Escape`	Simplify Selection	Simplify the current selection.	All
`Cmd-Enter`	Insert Blank Line	Create a blank, indented line below the current line.	macOS
`Ctrl-Enter`	Insert Blank Line	Create a blank, indented line below the current line.	windows, linux
`Ctrl-L`	Select Line	Exapnd the selection to cover entire lines.	macOS
`Alt-L`	Select Line	Exapnd the selection to cover entire lines.	windows, linux
`Cmd-I`	Select Parent Syntax	Select the next syntactic construct that is larger than the selection.	macOS
`Ctrl-I`	Select Parent Syntax		windows, linux
`Cmd-[`	Indent Less	Remove a unit of indentation from all selected lines.	macOS
`Ctrl-[`	Indent Less	Remove a unit of indentation from all selected lines.	windows, linux
`Cmd-]`	Indent More	Add a unit of indentation from all selected lines.	macOS
`Ctrl-]`	Indent More	Add a unit of indentation from all selected lines.	windows, linux
`Cmd-Alt-`	Indent Selection	Auto-indent the selected lines.	macOS
`Ctrl-Alt-`	Indent Selection	Auto-indent the selected lines.	windows, linux
`Shift-Cmd-K`	Delete Line	Delete selected lines.	macOS
`Shift-Ctrl-K`	Delete Line	Delete selected lines.	windows, linux
`Shift-Cmd-\`	Cursor Matching Bracket	Move the selection the bracket matching the one it is currently on, if any.	macOS
`Shift-Ctrl-\`	Cursor Matching Bracket		windows, linux
`Shift-Alt-A`	Toggle Block Comment	Toggle or uncomment the lines around the current selection using block comments.	All
History keymap
`Ctrl-Z`	undo	Undo a single group of history events.	All
`Ctrl-Shift-Z`	redo	Redo a group of history events.	macOS
`Ctrl-Y`	redo	Redo a group of history events.	windows, linux
`Ctrl-U`	Undo Selection	Undo a change or selection change.	All
`Ctrl-Shift-U`	Redo Selection	Redo a change or selection change.	macOS
`Alt-U`	Redo Selection	Redo a change or selection change.	windows, linux
Fold Keymap
`Cmd-Alt-[`	Fold Code	Fold the lines that are selected, if possible.	macOS
`Ctrl-Shift-[`	Fold Code	Fold the lines that are selected, if possible.	windows, linux
`Cmd-Alt-]`	Unfold Code	Unfold folded ranges on selected lines.	macOS
`Ctrl-Shift-]`	Unfold Code	Unfold folded ranges on selected lines.	windows, linux
`Ctrl-Alt-[`	Fold All	Fold all top-level foldable ranges.	All
`Ctrl-Alt-]`	Unfold All	Unfold all folded code.	All
AutoCompletion Keymap
`Ctrl-Space`	Start Completion	Explicity start autocompletion.	All
`Escape`	Close Completion	Close the currently active completion.	All
`Enter`	Accept Completion	Accept the current completion.	All
Lint Keymap
`Cmd-Shift-M`	Open Lint Panel	Command to open and focus the lint panel.	macOS
`Ctrl-Shift-M`	Open Lint Panel	Command to open and focus the lint panel.	windows, linux
`F8`	Next Diagnostic	Move the selection to the next diagnostic.	All
* - Operating system denotes whether a Keyboard Shortcut runs specifically on macOS, linux, or windows. If All is specified, then the Keyboard shortcut runs on all operating systems. ** - If a character A-Z is capitalized above, it does not mean that the letter needs to be capitalized when performing Keyboard Shortcut.

There should be different sanitation processes for HTML based on the use of the HTML and whether or not the user is the owner of the website or not (or whether or not the user is a certain level of user).

Enter Markdown Here

Learn about the basics of Markdown on (markdownguide.org)[https://www.markdownguide.org/].

Tips on Using Rich Text Editor / Code Editor / Markdown Editor

Rich Text Editor Tips

element

element

element

element

element

element

Code Editor Tips

How HTML is Sanitized

Enter Markdown Here

Comments

Inserting Custom HTML:

Basics:

Inserting Code Expressions:

Inserting $\Large{LaTeX}$ Expressions:

SVG Icon Search

AI Code Generation

The Sanitization of HTML