Implemented fancy keys for all keyboard shortcut expressions. Added a…

… margin to <kbd> tag so it doesn't crowd text: especially parens

docs/docs/actions/how-to-use-it.md

@@ -14,7 +14,7 @@ Actions are shortcuts for common use cases. For example, you might want to revie
 
 ### Slash commands
 
-The most common way to invoke an action is with a slash command. These are shortcuts that can be activated by typing '/' in a chat session (press cmd/ctrl + L (VS Code) or cmd/ctrl + J (JetBrains)), and selecting from the dropdown. For example, the built-in '/edit' slash command lets you stream edits directly into your editor.
+The most common way to invoke an action is with a slash command. These are shortcuts that can be activated by typing '/' in a chat session (press <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> (VS Code) or <kbd>cmd/ctrl</kbd> + <kbd>J</kbd> (JetBrains)), and selecting from the dropdown. For example, the built-in '/edit' slash command lets you stream edits directly into your editor.
 
 ![slash-commands](/img/slash-commands.png)
 
@@ -48,7 +48,7 @@ Write unit tests for the above selected code, following each of these instructio
 - Don't explain how to set up `jest`
 ```
 
-Now to use this prompt, you can highlight code and use `cmd/ctrl+L` to select it in the Continue sidebar.
+Now to use this prompt, you can highlight code and use <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> to select it in the Continue sidebar.
 
 Then, type "/" to see the list of slash commands and choose the one called "test". Press enter and the LLM will respond given the instructions from your prompt file.
 
@@ -76,10 +76,10 @@ Right click actions let you highlight a desired region of code, right click, and
 
 #### Debug action
 
-The debug action is a special built-in keyboard shortcut in the VS Code extension. Use `cmd/ctrl+shift+R` to instantly copy the contents of the current terminal into the chat sidebar and get debugging advice.
+The debug action is a special built-in keyboard shortcut in the VS Code extension. Use <kbd>cmd/ctrl</kbd> + <kbd>shift</kbd> + <kbd>R</kbd> to instantly copy the contents of the current terminal into the chat sidebar and get debugging advice.
 
 #### Quick fixes
 
-Whenever you see red/yellow underlines in your code indicating errors, you can place your cursor nearby and VS Code will display a lightbulb icon. Either clicking the lightbulb or using the keyboard shortcut `cmd/ctrl+.` will show a dropdown menu of quick fixes. One of these will be the “Ask Continue” action. Either click or use `cmd/ctrl+.` again and Continue will attempt to help solve the problem.
+Whenever you see red/yellow underlines in your code indicating errors, you can place your cursor nearby and VS Code will display a lightbulb icon. Either clicking the lightbulb or using the keyboard shortcut <kbd>cmd/ctrl</kbd> + <kbd>.</kbd> will show a dropdown menu of quick fixes. One of these will be the “Ask Continue” action. Either click or use <kbd>cmd/ctrl</kbd> + <kbd>.</kbd> again and Continue will attempt to help solve the problem.
 
 ![ask-continue](/img/ask-continue.png)

docs/docs/autocomplete/context-selection.md

@@ -13,7 +13,7 @@ We will always include the code from your file prior to and after the cursor pos
 
 ### Definitions from the Language Server Protocol
 
-Similar to how you can use `cmd/ctrl + click` in your editor, we use the same tool (the LSP) to power "go to definition". For example, if you are typing out a function call, we will include the function definition. Or, if you are writing code inside of a method, we will include the type definitions for any parameters or the return type.
+Similar to how you can use <kbd>cmd/ctrl</kbd> + `click` in your editor, we use the same tool (the LSP) to power "go to definition". For example, if you are typing out a function call, we will include the function definition. Or, if you are writing code inside of a method, we will include the type definitions for any parameters or the return type.
 
 ### Imported files
 

docs/docs/autocomplete/how-to-use-it.md

@@ -14,12 +14,12 @@ Autocomplete provides inline code suggestions as you type. To enable it, simply
 
 ### Accepting a full suggestion
 
-Accept a full suggestion by pressing `Tab`
+Accept a full suggestion by pressing <kbd>Tab</kbd>
 
 ### Rejecting a full suggestion
 
-Reject a full suggestion with `Esc`
+Reject a full suggestion with <kbd>Esc</kbd>
 
 ### Partially accepting a suggestion
 
-For more granular control, use `cmd/ctrl + →` to accept parts of the suggestion word-by-word.
+For more granular control, use <kbd>cmd/ctrl</kbd> + <kbd>→</kbd> to accept parts of the suggestion word-by-word.

docs/docs/chat/context-selection.md

@@ -11,11 +11,11 @@ Typing a question or instructions into the input box is the only required contex
 
 ## Highlighted code
 
-The highlighted code you’ve selected by pressing `cmd/ctrl + L` (VS Code) or `cmd/ctrl + J` (JetBrains) will be included in your prompt alongside the input you provide. This is the only section of code that will be provided to the model unless you highlight additional sections or use one of the other selection methods below.
+The highlighted code you’ve selected by pressing <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> (VS Code) or <kbd>cmd/ctrl</kbd> + <kbd>J</kbd> (JetBrains) will be included in your prompt alongside the input you provide. This is the only section of code that will be provided to the model unless you highlight additional sections or use one of the other selection methods below.
 
 ## Active file
 
-You can include the currently open file as context by pressing `cmd/ctrl + opt + enter` when you send your request.
+You can include the currently open file as context by pressing <kbd>cmd/ctrl</kbd> + <kbd>opt</kbd> + <kbd>enter</kbd> when you send your request.
 
 ## Specific file
 

docs/docs/chat/how-it-works.md

@@ -7,7 +7,7 @@ sidebar_position: 4
 
 Using any selected code sections, all context that you have selected with @, and your input instructions, we prompt the model to provide a response in the sidebar. If you are asking a follow-up, then all earlier session context is also included. No other additional context is provided to the model.
 
-The model response is then streamed directly back to the sidebar. Each code section included in the response will be placed into its own code block, which gives you buttons to either “Apply to current file”, “Insert at cursor”, or “Copy” for each section. When you press `cmd/ctrl + L` (VS Code) or `cmd/ctrl + J` (JetBrains) at the end of a session, all context is cleared and a new session is started, so that you can begin a new task.
+The model response is then streamed directly back to the sidebar. Each code section included in the response will be placed into its own code block, which gives you buttons to either “Apply to current file”, “Insert at cursor”, or “Copy” for each section. When you press <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> (VS Code) or <kbd>cmd/ctrl</kbd> + <kbd>J</kbd> (JetBrains) at the end of a session, all context is cleared and a new session is started, so that you can begin a new task.
 
 If you would like to view the exact prompt that is sent to the model during Chat, you can [view this in the prompt logs](troubleshooting.md#llm-prompt-logs).
 

docs/docs/chat/how-to-use-it.md

@@ -20,7 +20,7 @@ You send it a question, and it replies with an answer. You tell it to solve a pr
 
 ## Highlight a code section to include as context
 
-You select a code section with your mouse, press `cmd/ctrl + L` (VS Code) or `cmd/ctrl + J` (JetBrains) to send it to the LLM, and then ask for it to be explained to you or request it to be refactored in some way.
+You select a code section with your mouse, press <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> (VS Code) or <kbd>cmd/ctrl</kbd> + <kbd>J</kbd> (JetBrains) to send it to the LLM, and then ask for it to be explained to you or request it to be refactored in some way.
 
 ## Reference context with the @ symbol
 
@@ -32,8 +32,8 @@ When the LLM replies with edits to a file, you can click the “Apply” button.
 
 ## Start a fresh session for a new task
 
-Once you complete a task and want to start a new one, press `cmd/ctrl + L` (VS Code) or `cmd/ctrl + J` (JetBrains) to begin a new session, ensuring only relevant context for the next task is provided to the LLM.
+Once you complete a task and want to start a new one, press <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> (VS Code) or <kbd>cmd/ctrl</kbd> + <kbd>J</kbd> (JetBrains) to begin a new session, ensuring only relevant context for the next task is provided to the LLM.
 
 ## Switch between different models
 
-If you have configured multiple models, you can switch between models using the dropdown or by pressing `cmd/ctrl + ’`
+If you have configured multiple models, you can switch between models using the dropdown or by pressing <kbd>cmd/ctrl</kbd> + <kbd>’</kbd>

docs/docs/customize/deep-dives/autocomplete.md

@@ -103,8 +103,8 @@ Follow these steps to ensure that everything is set up correctly:
 2. Make sure you have downloaded Ollama.
 3. Run `ollama run starcoder2:3b` to verify that the model is downloaded.
 4. Make sure that any other completion providers are disabled (e.g. Copilot), as they may interfere.
-5. Check the output of the logs to find any potential errors (cmd/ctrl+shift+p -> "Toggle Developer Tools" -> "Console" tab in VS Code, ~/.continue/logs/core.log in JetBrains).
-6. Check VS Code settings to make sure that `"editor.inlineSuggest.enabled"` is set to `true` (use cmd/ctrl+, then search for this and check the box)
+5. Check the output of the logs to find any potential errors: <kbd>cmd/ctrl</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> -> "Toggle Developer Tools" -> "Console" tab in VS Code, ~/.continue/logs/core.log in JetBrains.
+6. Check VS Code settings to make sure that `"editor.inlineSuggest.enabled"` is set to `true` (use <kbd>cmd/ctrl</kbd> + <kbd>,</kbd> then search for this and check the box)
 7. If you are still having issues, please let us know in our [Discord](https://discord.gg/vapESyrFmJ) and we'll help as soon as possible.
 
 ### Completions are slow
@@ -122,8 +122,8 @@ Yes, in VS Code, if you don't want to be shown suggestions automatically you can
 1. Set `"editor.inlineSuggest.enabled": false` in VS Code settings to disable automatic suggestions
 2. Open "Keyboard Shortcuts" (cmd/ctrl+k, cmd/ctrl+s) and search for `editor.action.inlineSuggest.trigger`
 3. Click the "+" icon to add a new keybinding
-4. Press the key combination you want to use to trigger suggestions (e.g. `ctrl+space`)
-5. Now whenever you want to see a suggestion, you can press your key binding (e.g. `ctrl+space`) to trigger suggestions manually
+4. Press the key combination you want to use to trigger suggestions (e.g. <kbd>cmd/ctrl</kbd> + <kbd>space</kbd>)
+5. Now whenever you want to see a suggestion, you can press your key binding (e.g. <kbd>cmd/ctrl</kbd> + <kbd>space</kbd>) to trigger suggestions manually
 
 ### Is there a shortcut to accept one line at a time?
 
@@ -137,7 +137,7 @@ Click the "Continue" button in the status panel at the bottom right of the scree
 
 Alternatively, open VS Code settings, search for "Continue" and uncheck the box for "Enable Tab Autocomplete".
 
-You can also use the default shortcut to disable autocomplete directly: press `ctrl/cmd + K`, `ctrl/cmd + A`. This will turn off autocomplete without navigating through settings.
+You can also use the default shortcut to disable autocomplete directly using a chord: press and hold <kbd>ctrl/cmd</kbd> + <kbd>K</kbd> (continue holding <kbd>ctrl/cmd</kbd>) and press <kbd>ctrl/cmd</kbd> + <kbd>A</kbd>. This will turn off autocomplete without navigating through settings.
 
 #### JetBrains
 

docs/docs/customize/deep-dives/codebase.md

@@ -75,7 +75,7 @@ Continue also supports a **global** `.continueignore` file that will be respecte
 
 If you want to see exactly what files Continue has indexed, the metadata is stored in `~/.continue/index/index.sqlite`. You can use a tool like [DB Browser for SQLite](https://sqlitebrowser.org/) to view the `tag_catalog` table within this file.
 
-If you need to force a refresh of the index, reload the VS Code window with `cmd/ctrl + shift + p` + "Reload Window".
+If you need to force a refresh of the index, reload the VS Code window with <kbd>cmd/ctrl</kbd> + <kbd>shift</kbd> + <kbd>p</kbd> + "Reload Window".
 
 ## Repository map
 

docs/docs/customize/deep-dives/prompt-files.md

@@ -35,7 +35,7 @@ Write unit tests for the above selected code, following each of these instructio
 - Don't explain how to set up `jest`
 ```
 
-Now to use this prompt, you can highlight code and use `cmd/ctrl + L` to select it in the Continue sidebar.
+Now to use this prompt, you can highlight code and use <kbd>cmd/ctrl</kbd> + <kbd>L</kbd> to select it in the Continue sidebar.
 
 Then, type "/" to see the list of slash commands and choose the one called "test". Press enter and the LLM will respond given the instructions from your prompt file.
 

docs/docs/edit/how-to-use-it.md

@@ -20,7 +20,7 @@ Edit is best used for small, quick changes such as:
 
 ## Highlight code and activate
 
-Highlight the block of code you would like to modify, and press `cmd/ctrl + i` to activate the edit input.
+Highlight the block of code you would like to modify, and press <kbd>cmd/ctrl</kbd> + <kbd>i</kbd> to activate the edit input.
 
 ## Describe code changes
 
@@ -30,8 +30,8 @@ Describe the changes you would like the model to make to your highlighted code.
 
 Proposed changes appear as inline diffs within your highlighted text.
 
-You can navigate through each proposed change, accepting or rejecting them using `cmd/ctrl + opt + y` (to accept) or `cmd/ctrl + opt + n` (to reject).
+You can navigate through each proposed change, accepting or rejecting them using <kbd>cmd/ctrl</kbd> + <kbd>opt</kbd> + <kbd>y</kbd> (to accept) or <kbd>cmd/ctrl</kbd> + <kbd>opt</kbd> + <kbd>n</kbd> (to reject).
 
-You can also accept or reject all changes at once using `cmd/ctrl + shift + enter` (to accept) or `cmd/ctrl + shift + delete` (to reject).
+You can also accept or reject all changes at once using <kbd>cmd/ctrl</kbd> + <kbd>shift</kbd> + <kbd>enter</kbd> (to accept) or <kbd>cmd/ctrl</kbd> + <kbd>shift</kbd> + <kbd>delete/backspace</kbd> (to reject).
 
-If you want to request a new suggestion for the same highlighted code section, you can use `cmd/ctrl + i` to re-prompt the model.
+If you want to request a new suggestion for the same highlighted code section, you can use <kbd>cmd/ctrl</kbd> + <kbd>i</kbd> to re-prompt the model.

docs/docs/telemetry.md

@@ -46,6 +46,6 @@ To opt out, change the value of `allowAnonymousTelemetry` to `false`. Alternativ
 ### Steps to Disable Telemetry via VS Code Settings
 
 1. Open VS Code.
-2. Navigate to `File` > `Preferences` > `Settings` (or use the keyboard shortcut `Ctrl + ,` on Windows/Linux or `Cmd + ,` on macOS).
+2. Navigate to `File` > `Preferences` > `Settings` (or use the keyboard shortcut <kbd>ctrl</kbd> + <kbd>,</kbd> on Windows/Linux or <kbd>cmd</kbd> + <kbd>,</kbd> on macOS).
 3. In the search bar, type "Continue: Telemetry Enabled".
 4. Uncheck the "Continue: Telemetry Enabled" checkbox.

docs/docs/troubleshooting.md

@@ -24,7 +24,7 @@ To solve many problems, the first step is reading the logs to find the relevant
 In order to view debug logs, which contain extra information, click the dropdown at the top that says "Default levels" and select "Verbose".
 :::
 
-1. `cmd+shift+p` (MacOS) / `ctrl+shift+p` (Windows)
+1. <kbd>cmd</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> for MacOS or <kbd>ctrl</kbd> + <kbd>shift</kbd> + <kbd>P</kbd> for Windows
 2. Search for and then select "Developer: Toggle Developer Tools"
 3. This will open the [Chrome DevTools window](https://developer.chrome.com/docs/devtools/)
 4. Select the `Console` tab
@@ -56,7 +56,7 @@ We are constantly making fixes and improvements to Continue, but the latest chan
 
 On JetBrains, the "pre-release" happens through their Early Access Program (EAP) channel. To download the latest EAP version, enable the EAP channel:
 
-1. Open JetBrains settings (`cmd/ctrl + ,`) and go to "Plugins"
+1. Open JetBrains settings (<kbd>cmd/ctrl</kbd> + <kbd>,</kbd>) and go to "Plugins"
 2. Click the gear icon at the top
 3. Select "Manage Plugin Repositories..."
 4. Add "[https://plugins.jetbrains.com/plugins/eap/list](https://plugins.jetbrains.com/plugins/eap/list)" to the list
@@ -104,7 +104,7 @@ You may also set `requestOptions.caBundlePath` to an array of paths to multiple
 
 #### VS Code Proxy Settings
 
-If you are using VS Code and require requests to be made through a proxy, you are likely already set up through VS Code's [Proxy Server Support](https://code.visualstudio.com/docs/setup/network#_proxy-server-support). To double-check that this is enabled, use cmd/ctrl+, to open settings and search for "Proxy Support". Unless it is set to "off", then VS Code is responsible for making the request to the proxy.
+If you are using VS Code and require requests to be made through a proxy, you are likely already set up through VS Code's [Proxy Server Support](https://code.visualstudio.com/docs/setup/network#_proxy-server-support). To double-check that this is enabled, use <kbd>cmd/ctrl</kbd> + <kbd>,</kbd> to open settings and search for "Proxy Support". Unless it is set to "off", then VS Code is responsible for making the request to the proxy.
 
 #### code-server
 

docs/src/css/custom.css

@@ -47,6 +47,7 @@
 kbd {
   display: inline-block;
   padding: 0.3em 0.4em;
+  margin: 0.1em .4em;
   font-family: var(--ifm-font-family-monospace);
   font-size: .8rem;
   font-weight: 500;