Increasing readability of used terminology through adding a definition table

[LonelySquid]

Hello Devs!

Why this post? I have a tiny suggestion & question about the Keymaps In-Depth page. Some time ago I installed an sublime-block-comment plugin and I figured out I wanted to change the key binding of that plugin, so I found on the settings page of the plugin and found some information. I did not understand this, for I do not understand what a 'selector' is, and have additionaly still no idea what the 'source' is for too. That is when I searched the flight manual of Atom for additional information, despite me grasping it bit by bit it still feels a kind of messy, so this suggestion is primarily about the centralisation of the key concepts being expressed on the Keymaps In-Depth page to enhance readability.

Suggestions

• [ ] Create a table at the top of the Keymaps In-Depth page, listing the Keystroke, Command, Selector (and Source?) with a super brief piece of information, and maybe a link if there is another page that explains more about these basic hotkey topics.
• [ ] Maybe adding colors to the definitions, with an piece of code in color too, so it becomes more visual for beginners like me.
• [ ] Maybe adding a brief summary of the definitions to the keymap.cson too if it whould increase the readability.

I hope this feedback helps! Happy 2022, big thumbs up and thank you for reading!

Aqua

[icecream17]

'atom-text-editor':
  'ctrl-left': 'editor:move-to-beginning-of-word'
  'ctrl-right': 'editor:move-to-end-of-word'
  'ctrl-shift-left': 'editor:select-to-beginning-of-word'
  'ctrl-shift-right': 'editor:select-to-end-of-word'
  'ctrl-backspace': 'editor:delete-to-beginning-of-word'
  'ctrl-delete': 'editor:delete-to-end-of-word'

'atom-text-editor:not([mini])':
  'ctrl-alt-[': 'editor:fold-current-row'
  'ctrl-alt-]': 'editor:unfold-current-row'

selector is the similar concept of css selector

I made a complicated explanation but decided that the code below explains better.

But just know, element = html element

html elements define structure, css/less defines style (how elements look).

For example, here's the html of this element:

<p dir="auto">For example, here's the html of this element:</p>

And in this case, atom-text-editor matches any text-editors within the atom window, right now for me it matches:

<atom-text-editor class="editor" data-encoding="utf8" data-grammar="text plain null-grammar" tabindex="-1" style="contain: size;"> ... </atom-text-editor>

<atom-text-editor class="editor mini" mini="" data-encoding="utf8" data-grammar="text plain null-grammar" tabindex="-1"> ... </atom-text-editor>

Ok too much explanation

css selector:
   <several keybindings>

when any of these elements are focused:
   keyboard combo: does something