Improved keystroke formatting for shortcuts and key press menti… (#3257)

_static/css/custom.css

@@ -64,6 +64,11 @@
     --admonition-tip-title-background-color: #1abc9c;
     --admonition-tip-title-color: #fff;
 
+    --kbd-background-color: #fafbfc;
+    --kbd-outline-color: #d1d5da;
+    --kbd-shadow-color: #b0b7bf;
+    --kbd-text-color: #444d56;
+
     --btn-neutral-background-color: #f3f6f6;
     --btn-neutral-hover-background-color: #e5ebeb;
     --footer-color: #808080;
@@ -131,6 +136,11 @@
         --admonition-tip-title-background-color: #336648;
         --admonition-tip-title-color: #dfd;
 
+        --kbd-background-color: #595b5d;
+        --kbd-outline-color: #3d4144;
+        --kbd-shadow-color: #1e2023;
+        --kbd-text-color: #e2f2ff;
+
         --btn-neutral-background-color: #404040;
         --btn-neutral-hover-background-color: #505050;
         --footer-color: #aaa;
@@ -416,6 +426,20 @@ code,
     color: var(--admonition-tip-title-color);
 }
 
+/* Keyboard shortcuts tweaks */
+kbd, .kbd {
+    background-color: var(--kbd-background-color);
+    border: 1px solid var(--kbd-outline-color);
+    border-radius: 3px;
+    box-shadow: inset 0 -1px 0 var(--kbd-shadow-color);
+    color: var(--kbd-text-color);
+    display: inline-block;
+    font-size: 12px;
+    line-height: 11px;
+    padding: 4px 5px;
+    vertical-align: middle;
+}
+
 /* Buttons */
 
 .btn-neutral {

development/compiling/compiling_for_android.rst

@@ -60,7 +60,7 @@ to the same path, especially if you are using custom Android modules,
 since some Gradle plugins rely on the NDK and use this variable to
 determine its location.
 
-To set those environment variables on Windows, press **Windows + R**, type
+To set those environment variables on Windows, press :kbd:`Windows + R`, type
 "control system", then click on **Advanced system settings** in the left
 pane, then click on **Environment variables** on the window that
 appears.

development/compiling/compiling_for_uwp.rst

@@ -139,6 +139,6 @@ to build it at least once to generate some needed files, you can do so by
 right-clicking the project (*not* the solution) in the "Solution Explorer" and
 selecting "Build".
 
-Now you can just run the project and your app should open. You can use also
-the "Start Without Debugging" from the "Debug" menu (Ctrl+F5) to make it
+Now you can just run the project and your app should open. You can also use
+the "Start Without Debugging" option from the "Debug" menu (or press :kbd:`Ctrl + F5`) to make it
 launch faster.

development/cpp/configuring_an_ide.rst

@@ -270,12 +270,12 @@ Visual Studio Code
 
 - Ensure that C/C++ extension is installed. You can find instructions in `docs <https://code.visualstudio.com/docs/languages/cpp>`_.
 
-- Now open cloned godot folder in VS Code (File > Open Folder...)
+- Open cloned godot folder in VS Code with ``File > Open Folder...``
 
-In order to build the project, we need two configuration files: *launch.json* and *tasks.json*.
+In order to build the project, you need two configuration files: *launch.json* and *tasks.json*.
 To create them:
 
-- Open Debug view (Ctrl + Shift + D) and select cogwheel with an orange dot:
+- Open *Debug* view by pressing :kbd:`Ctrl + Shift + D` and select cogwheel with an orange dot:
 
 .. image:: img/vscode_1_create_launch.json.png
 
@@ -287,7 +287,7 @@ To create them:
 
 (Note that *godot.x11.tools.64* in "program" value might be named differently on macOS or Windows)
 
-- Create *tasks.json* by starting the Debug process (F5). VS Code will show a dialog with a *Configure Task* button. Tap it and select *Create tasks.json file from template*, then select *Others*
+- Create *tasks.json* by starting the Debug process with :kbd:`F5`. VS Code will show a dialog with a *Configure Task* button. Tap it and select *Create tasks.json file from template*, then select *Others*
 
 - Update *tasks.json* to match:
 

getting_started/scripting/gdscript/gdscript_styleguide.rst

@@ -361,7 +361,7 @@ This helps differentiate text comments from disabled code.
 .. note::
 
    In the script editor, to toggle the selected code commented, press
-   <kbd>Ctrl</kbd> <kbd>K</kbd>. This feature adds a single # sign at the start
+   :kbd:`Ctrl + K`. This feature adds a single # sign at the start
    of the selected lines.
 
 Whitespace

getting_started/scripting/visual_script/nodes_purposes.rst

@@ -119,7 +119,7 @@ This is the most common way to edit *Scene Nodes* in Visual Scripting. Select a
 
 The result is that this value can be changed from your script by writing to a *Data Port*.
 
-If instead reading this value is desired, drag the node again but hold the *Control* key (or Command on Mac). This will create a getter:
+If instead reading this value is desired, drag the node again but hold :kbd:`Ctrl` (or :kbd:`Cmd` on macOS). This will create a getter:
 
 .. image:: img/visual_script22.png
 
@@ -155,7 +155,7 @@ To use the variable in the script, simply drag it to the canvas to create a gett
 .. image:: img/visual_script26.png
 
 
-Likewise, hold *Control* (*Command* on Mac) to drop a setter:
+Likewise, hold :kbd:`Ctrl` (or :kbd:`Cmd` on macOS) to drop a setter:
 
 .. image:: img/visual_script27.png
 
@@ -195,7 +195,7 @@ Below the member panel, exists the list of all available node types:
 .. image:: img/visual_script33.png
 
 
-Ctrl-F (Command-F on Mac) allows you to search the list.
+Pressing :kbd:`Ctrl + F` (or :kbd:`Cmd + F` on macOS) allows you to search the list.
 
 Any of them can be dragged to the scene. Unlike nodes (e.g. dragging a property
 from the Inspector sets the context to the node being edited automatically), these are added without any "contextual" information, so this has to be done manually.

getting_started/step_by_step/animations.rst

@@ -70,7 +70,7 @@ keyframes with different values, the animation happens.
 
 .. image:: img/robisplash_anim_editor_keyframe_2.png
 
-Pressing "Play selected animation from start. (Shift-D)" on the animation panel
+Pressing "Play selected animation from start" button on the animation panel (or :kbd:`Shift + D` on keyboard)
 will make the logo descend.
 
 .. image:: img/robisplash_anim_editor_play_start.png

getting_started/step_by_step/instancing.rst

@@ -79,7 +79,7 @@ Multiple instances
 
 You can add as many instances as you like to a scene, either by using the
 "Instance" button again, or by clicking on the ball instance and pressing
-"Duplicate" (Ctrl-D):
+"Duplicate" (:kbd:`Ctrl + D`):
 
 .. image:: img/instancing_multiball.png
 

getting_started/step_by_step/intro_to_the_editor_interface.rst

@@ -116,12 +116,13 @@ You can see four workspace buttons at the top: 2D, 3D, Script and
 AssetLib.
 
 You’ll use the **2D workspace** for all types of games. In addition to 2D games,
-the 2D workspace is where you'll build your interfaces. Press F1 to access it.
+the 2D workspace is where you'll build your interfaces. Press :kbd:`F1` 
+(or :kbd:`Alt + 1` on macOS) to access it.
 
 .. image:: img/editor_ui_intro_editor_04_2d_workspace.png
 
 In the **3D workspace**, you can work with meshes, lights, and design
-levels for 3D games. Press F2 to access it.
+levels for 3D games. Press :kbd:`F2` (or :kbd:`Alt + 2` on macOS) to access it.
 
 .. image:: img/editor_ui_intro_editor_05_3d_workspace.png
 
@@ -133,8 +134,8 @@ related to the 3D viewport.
 .. note:: Read :ref:`doc_introduction_to_3d` for more detail about **3D workspace**.
 
 The **Script** workspace is a complete code editor with a debugger, rich
-auto-completion, and built-in code reference. Press F3 to access it, and
-F4 to search the reference.
+auto-completion, and built-in code reference. Press :kbd:`F3` (or :kbd:`Alt + 3` on macOS) 
+to access it, and :kbd:`F4` to search the reference.
 
 .. image:: img/editor_ui_intro_editor_06_script_workspace_expanded.png
 

getting_started/step_by_step/scenes_and_nodes.rst

@@ -139,7 +139,7 @@ change it to "Hello World":
 .. image:: img/hw.png
 
 Ok, everything's ready to run the scene! Press the PLAY SCENE Button on
-the top bar (or hit F6):
+the top bar (or hit :kbd:`F6`):
 
 .. image:: img/playscene.png
 

getting_started/step_by_step/scripting.rst

@@ -104,7 +104,7 @@ than a few minutes to get an overview of the concepts.
 Scene setup
 ~~~~~~~~~~~
 
-Use the "Add Child Node" dialogue accessed from the Scene tab (or by pressing ``Ctrl+A``) to create a hierarchy with the following
+Use the "Add Child Node" dialogue accessed from the Scene tab (or by pressing :kbd:`Ctrl + A`) to create a hierarchy with the following
 nodes:
 
 - Panel

getting_started/step_by_step/ui_code_a_life_bar.rst

@@ -353,7 +353,7 @@ This method needs to:
 
 Also call ``update_health`` at the end of the ``_ready`` function to
 initialize the ``Number`` node's ``text`` with the right value at the
-start of the game. Press F5 to test the game: the life bar updates with
+start of the game. Press :kbd:`F5` to test the game: the life bar updates with
 every attack!
 
 .. figure:: img/lifebar_tutorial_LifeBar_health_update_no_anim.gif

getting_started/step_by_step/ui_game_user_interface.rst

@@ -163,7 +163,7 @@ parent ``MarginContainer``.
 As they have a container as their direct parent, we cannot move them
 freely: the ``Count`` node will always reset their anchors, their size
 and position. Try to move and resize the nodes in the viewport. Then,
-select any of the three textures and press Ctrl Up or Ctrl Down to
+select any of the three textures and press :kbd:`Ctrl + Up` or :kbd:`Ctrl + Down` to
 reorder them in the Scene dock. They'll snap back to their previous size
 and position.
 
@@ -256,7 +256,7 @@ Design the bomb and emerald counters
 The bomb and emerald counters are like the bar's ``Count`` node. So we'll
 duplicate it and use it as a template.
 
-Under the ``Bar`` node, select ``Count`` and press Ctrl D to duplicate
+Under the ``Bar`` node, select ``Count`` and press :kbd:`Ctrl + D` to duplicate
 it. Drag and drop the new node under the ``Counters`` ``HBoxContainer``
 at the bottom of the scene tree. You should see it resize automatically.
 Don't worry about this for now, we'll fix the size soon.
@@ -408,7 +408,7 @@ Inherit the Bar Scene to build the LifeBar
 Go to ``Scene -> New Inherited Scene`` to create a new type of ``Bar``.
 Select the Bar scene and open it. You should see a new [unsaved] tab,
 that's like your ``Bar``, but with all nodes except the root in grey.
-Press ``Meta+S`` to save the new inherited scene and name it
+Press :kbd:`Meta + S` to save the new inherited scene and name it
 ``LifeBar``.
 
 .. figure:: img/ui_gui_step_tutorial_inherited_scene_parent.png
@@ -474,7 +474,7 @@ all the resources this node uses and create unique copies for us.
 .. tip::
 
     When you duplicate a node from the Scene tree, with
-    ``Meta+D``, it shares its resources with the original node. You
+    :kbd:`Meta + D`, it shares its resources with the original node. You
     need to use ``Make Sub-Resources Unique`` before you can tweak the
     resources without affecting the source node.
 

getting_started/step_by_step/ui_main_menu.rst

@@ -127,7 +127,7 @@ We have to add a root node before we can save the scene. Your UI's root
 should be the outermost container or element. In this case it's a
 ``MarginContainer``. ``MarginContainer`` is a good starting point for
 most interfaces, as you often need padding around the UI. Press
-``Meta+S`` to save the scene to the disk. Name it *MainMenu*.
+:kbd:`Meta + S` to save the scene to the disk. Name it *MainMenu*.
 
 Select the ``MarginContainer`` again, and head to the inspector to
 define the margins' size. Scroll down the ``Control`` class, to the
@@ -152,9 +152,9 @@ Select the ``MarginContainer``, and create the UI elements as
 3. the version note,
 4. and the main menu’s illustration.
 
-Click the **Add Node** button or press ``Meta+A`` on your keyboard.
+Click the **Add Node** button or press :kbd:`Meta + A` on your keyboard.
 Start to type ``TextureRect`` to find the corresponding node and press
-enter. With the new node selected, press ``Meta+D`` five times to
+enter. With the new node selected, press :kbd:`Meta + D` five times to
 create five extra ``TextureRect`` instances.
 
 Click each of the nodes to select it. In the inspector, find the **Texture**
@@ -234,7 +234,7 @@ automatically.
 
 To space out the menu options and the logo on the left, we'll use one
 final container and its size flags. Select the ``VBoxContainer`` and
-press ``Meta+A`` to add a new node inside it. Add a second
+press :kbd:`Meta + A` to add a new node inside it. Add a second
 ``VBoxContainer`` and name it *MenuOptions*. Select all three menu
 options, ``Continue``, ``NewGame`` and ``Options``, and drag and drop
 them inside the new ``VBoxContainer``. The UI's layout should barely
@@ -288,7 +288,7 @@ size of UI elements.
 
 The order in which you nest matters. To see if your
 UI adapts nicely to different screen ratios, select the root node, press
-the Q key to activate the Select Mode, select the container and click
+:kbd:`Q` to activate the Select Mode, select the container and click
 and drag on one of the container's corners to resize it. The UI
 components should flow inside of it.
 

getting_started/step_by_step/your_first_game.rst

@@ -82,7 +82,7 @@ are not selectable."
 
 .. image:: img/lock_children.png
 
-Save the scene. Click Scene -> Save, or press ``Ctrl+S`` on Windows/Linux or ``Command+S`` on Mac.
+Save the scene. Click Scene -> Save, or press :kbd:`Ctrl + S` on Windows/Linux or :kbd:`Cmd + S` on macOS.
 
 .. note:: For this project, we will be following the Godot naming conventions.
 
@@ -1227,7 +1227,7 @@ This is the default input event associated with the spacebar.
 
 .. image:: img/start_button_shortcut.png
 
-Now when the start button appears, you can either click it or press the spacebar
+Now when the start button appears, you can either click it or press :kbd:`Space`
 to start the game.
 
 Project files

getting_started/workflow/best_practices/autoloads_versus_internal_nodes.rst

@@ -103,7 +103,7 @@ instead to get auto-completion for a type in your entire project.
    Autoload is not exactly a Singleton. Nothing prevents you from instantiating
    copies of an auto-loaded node. It is only a tool that makes a node load
    automatically as a child of the root of your scene tree, regardless of your
-   game's node structure or which scene you run, e.g. by pressing the ``F6`` key.
+   game's node structure or which scene you run, e.g. by pressing :kbd:`F6` key.
 
    As a result, you can get the auto-loaded node, for example an autoload called
    ``Sound``, by calling ``get_node("/root/Sound")``.

getting_started/workflow/export/android_custom_build.rst

@@ -114,7 +114,7 @@ In there, run ``sdkmanager --licenses``:
 
 .. image:: img/custom_build_sdkmanager.png
 
-This will ask you to accept several licenses, just write ``y`` and press Enter
+This will ask you to accept several licenses, just write ``y`` and press :kbd:`Enter`
 on every of them until it's done.
 
 Afterwards, install the platform tools (this is required to install ``adb``):

tutorials/2d/using_tilemaps.rst

@@ -159,7 +159,7 @@ Tips and tricks
 
 - You can flip and rotate tiles using the icons at the top right of the editor.
 
-- To draw straight lines, hold <Shift> while clicking and dragging a tile.
+- To draw straight lines, hold :kbd:`Shift` while clicking and dragging a tile.
 
 - Tools such as copy, paste, and bucket fill, can be found in the "TileMap"
   menu in the upper-right.

tutorials/3d/fps_tutorial/part_one.rst

@@ -566,7 +566,7 @@ Here is what the :ref:`Spatial <class_Spatial>` gizmo shows when you are using l
 Notice how the arrows follow the rotation of the object on the left, which looks exactly
 the same as the 3D example for local space.
 
-.. note:: You can change between local and world space modes by pressing T or the little cube button
+.. note:: You can change between local and world space modes by pressing :kbd:`T` or the little cube button
           when you have a :ref:`Spatial <class_Spatial>` based node selected.
 
 .. image:: img/LocalSpaceExampleGizmo.png
@@ -680,8 +680,8 @@ _________
 To test the code, open up the scene named ``Testing_Area.tscn``, if it's not already opened up. We will be using
 this scene as we go through the next few tutorial parts, so be sure to keep it open in one of your scene tabs.
 
-Go ahead and test your code either by pressing ``F6`` with ``Testing_Area.tscn`` as the open tab, by pressing the
-play button in the top right corner, or by pressing ``F5``.
+Go ahead and test your code either by pressing :kbd:`F6` with ``Testing_Area.tscn`` as the open tab, by pressing the
+play button in the top right corner, or by pressing :kbd:`F5`.
 You should now be able to walk around, jump in the air, and look around using the mouse.
 
 
@@ -829,7 +829,7 @@ Now, when the player is sprinting, we'll use ``SPRINT_ACCEL`` instead of ``ACCEL
 
 _________
 
-You should now be able to sprint if you press the ``shift`` button, and can toggle the flash light on and off by pressing the ``F`` button!
+You should now be able to sprint if you press :kbd:`Shift`, and can toggle the flash light on and off by pressing :kbd:`F`!
 
 Go try it out! You can change the sprint-related class variables to make the player faster or slower when sprinting!
 

tutorials/3d/fps_tutorial/part_three.rst

@@ -23,10 +23,12 @@ Changing levels
 
 Now that we have a fully working FPS, let's move to a more FPS-like level.
 
-Open up ``Space_Level.tscn`` (``assets/Space_Level_Objects/Space_Level.tscn``) and/or ``Ruins_Level.tscn`` (``assets/Ruin_Level_Objects/Ruins_Level.tscn``).
+Open up ``Space_Level.tscn`` (``assets/Space_Level_Objects/Space_Level.tscn``) 
+and/or ``Ruins_Level.tscn`` (``assets/Ruin_Level_Objects/Ruins_Level.tscn``).
 
-``Space_Level.tscn`` and ``Ruins_Level.tscn`` are complete custom FPS levels created for the purpose of this tutorial. Press ``F6`` to
-play the open scene, or press the ``play current scene button``, and give each a try.
+``Space_Level.tscn`` and ``Ruins_Level.tscn`` are complete custom FPS levels 
+created for the purpose of this tutorial. Press ``Play Current Scene`` button,
+or :kbd:`F6` on keyboard, and give each a try.
 
 .. warning:: ``Space_Level.tscn`` is more graphically demanding of the GPU than ``Ruins_Level.tscn``. If your computer is struggling to render
           ``Space_Level.tscn``, try using ``Ruins_Level.tscn`` instead.

tutorials/3d/fps_tutorial/part_two.rst

@@ -300,13 +300,13 @@ reach the point where the muzzle starts to flash.
           light that escapes the muzzle when a bullet is fired. The muzzle is also sometimes referred to as the
           barrel of the gun.
 
-.. tip:: For finer control when scrubbing the timeline, press ``control`` and scroll forward with the mouse wheel to zoom in.
+.. tip:: For finer control when scrubbing the timeline, press :kbd:`Ctrl` and scroll forward with the mouse wheel to zoom in.
          Scrolling backwards will zoom out.
 
          You can also change how the timeline scrubbing snaps by changing the value in ``Step (s)`` to a lower/higher value.
 
-Once you get to a point you like, right click on the row for "Animation Player" and press insert key.
-In the empty name field, enter ``animation_callback`` and press ``enter``.
+Once you get to a point you like, right click on the row for "Animation Player" and press ``Insert Key``.
+In the empty name field, enter ``animation_callback`` and press :kbd:`Enter`.
 
 .. image:: img/AnimationPlayerInsertKey.png
 
@@ -324,7 +324,7 @@ Go to the "Rifle_fire" animation from the animation drop down. Add the call meth
 animation track list by clicking the "Add Track" button above the list. Find the point where the muzzle starts
 to flash and right click and press ``Insert Key`` to add a call method track point at that position on the track.
 
-Type "animation_callback" into the name field of the pop up which opened and press ``enter``.
+Type "animation_callback" into the name field of the pop up which opened and press :kbd:`Enter`.
 
 Now we need to apply the callback method track to the knife animation. Select the "Knife_fire" animation and scroll to the bottom of the
 animation tracks. Click the "Add Track" button above the list and add a method track.
@@ -334,7 +334,7 @@ Next find a point around the first third of the animation to place the animation
          For this tutorial we are reusing the gun firing logic for our knife, so the animation has been named in a style that
          is consistent with the other animations.
 
-From there right click on the timeline and click "Insert Key". Put "animation_callback" into the name field and press ``enter``.
+From there right click on the timeline and click "Insert Key". Put "animation_callback" into the name field and press :kbd:`Enter`.
 
 .. tip:: Be sure to save your work!
 
@@ -1216,7 +1216,7 @@ Now we need to attach this script to all of the :ref:`RigidBody <class_RigidBody
 
 Open up ``Testing_Area.tscn`` and select all the cubes parented to the ``Cubes`` node.
 
-.. tip:: If you select the top cube, and then hold down ``shift`` and select the last cube, Godot will
+.. tip:: If you select the top cube, and then hold down :kbd:`Shift` and select the last cube, Godot will
          select all the cubes in-between!
 
 Once you have all the cubes selected, scroll down in the inspector until you get to

tutorials/3d/introduction_to_3d.rst

@@ -159,9 +159,9 @@ Vector3,Color,etc.).
 
 Some useful keybindings:
 
--  To snap placement or rotation, press the "Ctrl" key while moving, scaling
+-  To snap placement or rotation, press :kbd:`Ctrl` while moving, scaling
    or rotating.
--  To center the view on the selected object, press the "f" key.
+-  To center the view on the selected object, press :kbd:`F`.
 
 View menu
 ---------

tutorials/3d/using_gridmaps.rst

@@ -85,15 +85,15 @@ The "Cell/Size" property should be set to the size of your meshes. You can leave
 it at the default value for the demo. Set the "Center Y" property to "Off".
 
 Now you can start designing the level by choosing a tile from the palette and
-placing it with Left-Click in the editor window. To remove a tile, use
-Shift+Right-click.
+placing it with Left-Click in the editor window. To remove a tile, hold :kbd:`Shift` 
+and use Right-click.
 
 Click on the "GridMap" menu to see options and shortcuts. For example, pressing
-"S" rotates a tile around the y-axis.
+:kbd:`S` rotates a tile around the y-axis.
 
 .. image:: img/gridmap_menu.png
 
-Holding <Shift> and dragging with the left mouse button will draw a selection
+Holding :kbd:`Shift` and dragging with the left mouse button will draw a selection
 box. You can duplicate or clear the selected area using the respective menu
 options.
 

tutorials/animation/cutout_animation.rst

@@ -80,8 +80,8 @@ create a child sprite and load the torso texture, later accommodate it properly:
 .. image:: img/tuto_cutout3.png
 
 This looks good. Let's see if our hierarchy works as a skeleton by
-rotating the torso. We can do this be pressing ``E`` to enter rotate mode,
-and dragging with the left mouse button. To exit rotate mode hit ``ESC``.
+rotating the torso. We can do this be pressing :kbd:`E` to enter rotate mode,
+and dragging with the left mouse button. To exit rotate mode hit :kbd:`ESC`.
 
 .. image:: img/tutovec_torso1.gif
 
@@ -101,7 +101,7 @@ Sprite:
 .. image:: img/tuto_cutout5.png
 
 The pivot can also be adjusted *visually*. While hovering over the
-desired pivot point,  press the "v" key to move the pivot there for the
+desired pivot point,  press :kbd:`V` to move the pivot there for the
 selected Sprite. There is also a tool in the tool bar that has a
 similar function.
 

tutorials/animation/introduction_2d.rst

@@ -99,8 +99,8 @@ to the node and the affected property.
 
    If you animate the wrong property, you can edit a track's path anytime.
    Double click on it and type the new path. Play the animation using the
-   "Play from beginning" button |Play from beginning| (Default shortcut:
-   Shift+D) to see the changes instantly.
+   "Play from beginning" button |Play from beginning| (or pressing
+   :kbd:`Shift + D` on keyboard) to see the changes instantly.
 
 Tutorial: Creating a simple animation
 -------------------------------------

tutorials/inputs/input_examples.rst

@@ -107,7 +107,7 @@ input. Key events are even printed as their key symbols. For example, let's cons
 It inherits from the following classes:
 
 - :ref:`InputEvent <class_InputEvent>` - the base class for all input events
-- :ref:`InputEventWithModifiers <class_InputEventWithModifiers>` - adds the ability to check if modifiers are pressed, such as ``Shift`` or ``Alt``.
+- :ref:`InputEventWithModifiers <class_InputEventWithModifiers>` - adds the ability to check if modifiers are pressed, such as :kbd:`Shift` or :kbd:`Alt`.
 - :ref:`InputEventMouse <class_InputEventMouse>` - adds mouse event properties, such as ``position``
 - :ref:`InputEventMouseButton <class_InputEventMouseButton>` - contains the index of the button that was pressed, whether it was a double-click, etc.
 
@@ -178,7 +178,7 @@ Keyboard events
 Keyboard events are captured in :ref:`InputEventKey <class_InputEventKey>`.
 While it's recommended to use input actions instead, there may be cases where
 you want to specifically look at key events. For this example, let's check for
-the "T" key:
+the :kbd:`T`:
 
 .. tabs::
  .. code-tab:: gdscript GDScript
@@ -210,8 +210,8 @@ Keyboard modifiers
 Modifier properties are inherited from
 :ref:`InputEventWithModifiers <class_InputEventWithModifiers>`. This  allows
 you to check for modifier combinations using boolean properties. Let's imagine
-you want one thing to happen when the "T" key is pressed, but something
-different when it's "Shift+T":
+you want one thing to happen when the :kbd:`T` is pressed, but something
+different when it's :kbd:`Shift + T`:
 
 .. tabs::
  .. code-tab:: gdscript GDScript

tutorials/math/matrices_and_transforms.rst

@@ -417,7 +417,7 @@ Moving an object relative to itself
 
 A common operation, especially in 3D games, is to move an object relative
 to itself. For example, in first-person shooter games, you would want the
-character to move forward (-Z axis) when you press the W key.
+character to move forward (-Z axis) when you press :kbd:`W`.
 
 Since the basis vectors are the orientation relative to the parent,
 and the origin vector is the position relative to the parent, we can simply