Skip to content

Commit

Permalink
[all hosts] Use kbd HTML tag (#928)
Browse files Browse the repository at this point in the history
* [all hosts] Use kbd HTML tag

* Update after clarification
  • Loading branch information
ElizabethSamuel-MSFT authored Jan 30, 2025
1 parent 07cc664 commit d43ead6
Show file tree
Hide file tree
Showing 23 changed files with 39 additions and 38 deletions.
8 changes: 4 additions & 4 deletions Excel-custom-functions/AzureFunction/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ This sample shows how to move the code from the `Add` custom function into an Az
To set up your development environment:

1. Install [Visual Studio Code](https://code.visualstudio.com) on one of the supported platforms.
2. Install the [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions). You can also search for the Azure Functions extension in the VS Code Extensions view (Ctrl + Shift + X) and typing 'Azure Functions'.
2. Install the [Azure Functions extension](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azurefunctions). You can also search for the Azure Functions extension in the VS Code Extensions view (<kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>X</kbd>) and typing 'Azure Functions'.

You will also need the following:

Expand Down Expand Up @@ -124,15 +124,15 @@ If you prefer to host the web server for the custom function on your computer, f
You can also deploy and run the Azure Function from your own Azure account.

1. Start Visual Studio Code and open the **AzureFunction/AzureFunctionProject** folder in the project.
1. In Visual Studio Code, press F1 to open the command palette. In the command palette, search for and select **Azure Functions: Deploy to function app....** and then choose your subscription.
1. In Visual Studio Code, press <kbd>F1</kbd> to open the command palette. In the command palette, search for and select **Azure Functions: Deploy to function app....** and then choose your subscription.
![Screenshot of selecting Azure Functions: Deploy to function app in the command palette](images/azure-deploy-task.png)
>Note: If you are not signed-in, you are prompted to **Sign in to Azure**. You can also **Create a free Azure account**. After successful sign in from the browser, go back to Visual Studio Code.
1. Choose **+ Create New Function App in Azure**.
1. Type a globally unique name that identifies your function app and press Enter. Valid characters for a function app name are `a-z`, `0-9`, and `-`.
1. Type a globally unique name that identifies your function app and press <kbd>Enter</kbd>. Valid characters for a function app name are `a-z`, `0-9`, and `-`.
1. Select the most recent Node.js LTS version for the runtime stack.
1. Select a geographical location near you for the location for new resources.

When you press Enter, the following Azure resources are created in your subscription:
When you press <kbd>Enter</kbd>, the following Azure resources are created in your subscription:
- Resource group: Contains all of the created Azure resources. The name is based on your function app name.
- Storage account: A standard Storage account is created with a unique name that is based on your function app name.
Expand Down
2 changes: 1 addition & 1 deletion Samples/Excel.TableBindingFormatting/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ Version | Date | Comments
## Building the Sample ##
1. Open `ExcelFormattingSample.sln` in Visual Studio 2013.
2. Right-click (or select and hold) on the `ExcelFormattingSample` project in Solution Explorer and choose **Set as startup project**.
3. Press the F5 key to build the solution and run it in Excel 2013
3. Press the <kbd>F5</kbd> key to build the solution and run it in Excel 2013.

## Description ##

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -270,7 +270,7 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco
```
>Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.
Start your app by running `npm start`, and start debugging in VS Code by pressing <kbd>F5</kbd> or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor.

Having problems with VS Code Debugging? Please see their [troubleshooting guide](https://github.com/Microsoft/vscode-chrome-debug/blob/master/README.md#troubleshooting).

Expand All @@ -282,7 +282,7 @@ In the WebStorm menu `Run` select `Edit Configurations...`. Then click `+` and s

>Note: the URL may be different if you've made adjustments via the [HOST or PORT environment variables](#advanced-configuration).
Start your app by running `npm start`, then press `^D` on macOS or `F9` on Windows and Linux or click the green debug icon to start debugging in WebStorm.
Start your app by running `npm start`, then press <kbd>Ctrl</kbd>+<kbd>D</kbd> on macOS or <kbd>F9</kbd> on Windows and Linux or click the green debug icon to start debugging in WebStorm.

The same way you can debug your application in IntelliJ IDEA Ultimate, PhpStorm, PyCharm Pro, and RubyMine.

Expand Down Expand Up @@ -1217,7 +1217,7 @@ The watcher includes an interactive command-line interface with the ability to r

By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests.

Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests.
Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press <kbd>a</kbd> in the watch mode to force Jest to run all tests.

Jest will always run all tests on a [continuous integration](#continuous-integration) server or if the project is not inside a Git or Mercurial repository.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ Versión | Fecha | Comentarios

![ Elija la aplicación host de Office que desee:](images/SelectHost.JPG) Word, Excel o PowerPoint](images/SelectHost.JPG)

6. Pulse F5.
6. Pulse <kbd>F5</kbd>.
7. En la aplicación de Office, elija **insertar** > **Abrir complemento**en los**archivos de OneDrive** para abrir el complemento del panel de tareas.
8. Las páginas y los botones del complemento se explican por sí mismos.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Version | Date | Commentaires

![Choisissez l’application hôte Office souhaitée :](images/SelectHost.JPG) Excel ou PowerPoint ou Word](images/SelectHost.JPG)

6. Appuyez sur la touche F5.
6. Appuyez sur la touche <kbd>F5</kbd>.
7. Dans l’application Office, sélectionnez **Insérer** > **Ouvrir un complément** dans le groupe **Fichiers OneDrive** pour ouvrir le complément du volet Office.
8. Les pages et les boutons du complément sont explicites.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Office アドイン Microsoft Graph ASP.NET | Microsoft

![必要な Office ホスト アプリケーションを選択する:Excel、PowerPoint、または Word](images/SelectHost.JPG)

6. F5 キーを押します。
6. <kbd>F5</kbd> キーを押します。
7. Office アプリケーションで、[**OneDrive ファイル**] グループから [**挿入**][**アドインを開く**] の順に選択して、タスク ウィンドウのアドインを開きます。
8. アドインのページとボタンは、わかりやすく説明不要です。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Versão | Data | Comentários

![Escolha o aplicativo host do Office desejado: Excel ou PowerPoint ou Word](images/SelectHost.JPG)

6. Pressione F5.
6. Pressione <kbd>F5</kbd>.
7. No aplicativo do Office, escolha **Inserir** > **Abrir Suplemento** no grupo **Arquivos do OneDrive** para abrir o suplemento do painel de tarefas.
8. As páginas e os botões do suplemento são auto-explicativos.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ extensions:

![Выбор ведущего приложения Office:](images/SelectHost.JPG) Excel, PowerPoint или Word](images/SelectHost.JPG)

6. Нажмите клавишу F5.
6. Нажмите клавишу <kbd>F5</kbd>.
7. В приложении Office выберите **Вставить** > **Открыть приложение** в группе **Файлы OneDrive**, чтобы открыть надстройку "Область задач".
8. Страницы и кнопки в надстройке не требуют объяснений.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Office 外接程序 Microsoft Graph ASP.NET | Microsoft

![选择所需的 Office 主机应用程序:](images/SelectHost.JPG)Excel、PowerPoint 或 Word](images/SelectHost.JPG)

6.F5
6.<kbd>F5</kbd>
7. 在 Office 应用程序中,选择“**OneDrive文件**”组中的“**插入**”>“**打开外接程序**”,打开任务窗格外接程序。
8. 外接程序中的页面和按钮一目了然。

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ Version | Date | Comments

![Choose the desired Office host application: Excel or PowerPoint or Word](images/SelectHost.JPG)

1. Press F5.
1. Press <kbd>F5</kbd>.
1. In the Office application, choose **Insert** > **Open Add-in** in the **OneDrive Files** group to open the task pane add-in.
1. The pages and buttons in the add-in are self-explanatory.

Expand Down
7 changes: 4 additions & 3 deletions Samples/auth/Office-Add-in-SSO-NAA/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,14 +85,15 @@ You'll be prompted to consent to the scopes the sample needs when you select the
## Selecting hosts and debugging steps

If you want to choose Word or PowerPoint, modify the `start` command in the `package.json` file to match one of the following entries.

- For Word: `"start": "office-addin-debugging start manifest.xml desktop --app word",`
- For PowerPoint: `"start": "office-addin-debugging start manifest.xml desktop --app powerpoint",`

You can also debug the sample by opening the project in VS Code.

1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut **Ctrl+Shift+D**.
1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>.
1. Select the launch configuration you want from the **Configuration dropdown** in the **Run and Debug** view. For example, **Word Desktop (Edge Chromium)**.
1. Start your debug session with **F5**, or **Run > Start Debugging**.
1. Start your debug session with **F5**, or **Run** > **Start Debugging**.

![VS Code debug view](./assets/vs-code-debug-view.png)

Expand All @@ -102,7 +103,7 @@ For more information on debugging with VS Code, see [Debugging](https://code.vis

The `src/taskpane/authConfig.ts` file contains the MSAL code for configuring and using NAA. It contains a class named AccountManager which manages getting user account and token information.

- The `initialize` function is called from Office.onReady to configure and intitialize MSAL to use NAA.
- The `initialize` function is called from Office.onReady to configure and initialize MSAL to use NAA.
- The `ssoGetToken` function gets an access token for the signed in user to call Microsoft Graph APIs.
- The `ssoGetUserIdentity` function gets the account information of the signed in user. This can be used to get user details such as name and email.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ Version | Date | Comments

![Choose the desired Outlook host: desktop or one of the browsers](images/StartAction.JPG)

1. Press F5. The first time you do this, you will be prompted to specify the email and password of the user that you will use for debugging the add-in. Use the credentials of an admin for your O365 tenancy.
1. Press <kbd>F5</kbd>. The first time you do this, you will be prompted to specify the email and password of the user that you will use for debugging the add-in. Use the credentials of an admin for your O365 tenancy.

![Form with text boxes for user's email and password](images/CredentialsPrompt.JPG)

Expand Down
6 changes: 3 additions & 3 deletions Samples/auth/Outlook-Add-in-SSO-NAA-IE/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -97,9 +97,9 @@ You will be prompted to consent to the scopes the sample needs when you select t

You can debug the sample by opening the project in VS Code.

1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut **Ctrl+Shift+D**.
1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>.
1. Select the launch configuration you want from the **Configuration dropdown** in the **Run and Debug** view. For example, **Outlook Desktop (Edge Chromium)**.
1. Start your debug session with **F5**, or **Run > Start Debugging**.
1. Start your debug session with **F5**, or **Run** > **Start Debugging**.

![The VS Code debug view.](./assets/vs-code-debug-view.png)

Expand All @@ -109,7 +109,7 @@ For more information on debugging with VS Code, see [Debugging](https://code.vis

The `src/taskpane/msalAuth.ts` file contains the MSAL code for configuring and using NAA. It contains a class named AccountManager which manages getting user account and token information.

- The `initialize` function is called from Office.onReady to configure and intitialize MSAL to use NAA.
- The `initialize` function is called from Office.onReady to configure and initialize MSAL to use NAA.
- The `ssoGetAccessToken` function gets an access token for the signed in user to call Microsoft Graph APIs.

The `src/taskpane/taskpane.ts` file contains code that runs when the user chooses buttons in the task pane. They use the AccountManager class to get tokens or user information depending on which button is chosen.
Expand Down
6 changes: 3 additions & 3 deletions Samples/auth/Outlook-Add-in-SSO-NAA/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,9 +86,9 @@ You will be prompted to consent to the scopes the sample needs when you select t

You can debug the sample by opening the project in VS Code.

1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut **Ctrl+Shift+D**.
1. Select the **Run and Debug** icon in the **Activity Bar** on the side of VS Code. You can also use the keyboard shortcut <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>D</kbd>.
1. Select the launch configuration you want from the **Configuration dropdown** in the **Run and Debug** view. For example, **Outlook Desktop (Edge Chromium)**.
1. Start your debug session with **F5**, or **Run > Start Debugging**.
1. Start your debug session with **F5**, or **Run** > **Start Debugging**.

![The VS Code debug view.](./assets/vs-code-debug-view.png)

Expand All @@ -98,7 +98,7 @@ For more information on debugging with VS Code, see [Debugging](https://code.vis

The `src/taskpane/authConfig.ts` file contains the MSAL code for configuring and using NAA. It contains a class named AccountManager which manages getting user account and token information.

- The `initialize` function is called from Office.onReady to configure and intitialize MSAL to use NAA.
- The `initialize` function is called from Office.onReady to configure and initialize MSAL to use NAA.
- The `ssoGetAccessToken` function gets an access token for the signed in user to call Microsoft Graph APIs.
- The `getTokenWithDialogApi` function uses the Office dialog API to support a fallback option if NAA fails.

Expand Down
2 changes: 1 addition & 1 deletion Samples/blazor-add-in/excel-blazor-add-in/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ This sample shows how to build an Excel add-in using .NET Blazor technologies. B

1. Download or clone the [Office Add-ins samples repository](https://github.com/OfficeDev/Office-Add-in-samples).
1. Open Visual Studio 2022 and open the **Office-Add-in-samples\Samples\blazor-add-in\excel-blazor-add-in\excel-blazor-add-in.sln** solution. (Do **not** open Visual Studio "as administrator". There is a bug that will prevent the add-in from sideloading when Visual Studio is elevated in this way.)
1. Choose **Debug** > **Start Debugging**. Or press F5 to start the solution.
1. Choose **Debug** > **Start Debugging**. Or press <kbd>F5</kbd> to start the solution.
1. When Excel opens, choose **Sample Add-in** > **Show task pane** (if not already open).
1. Try out the controls on the task panes.
1. Try out the custom buttons on the **Sample Add-in** tab on the ribbon.
Expand Down
2 changes: 1 addition & 1 deletion Samples/blazor-add-in/outlook-blazor-add-in/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ Working with Blazor Webassembly in the framework of Office, you can:
1. In the **Properties** window, set the **Email Address** to the email address of the account you want to use with this sample.
In case this was not set before running you might also see this dialog:
![Start Action](./images/Connect.png)
1. To start the solution, choose **Debug** > **Start Debugging** or press **F5**.
1. To start the solution, choose **Debug** > **Start Debugging** or press <kbd>F5</kbd>.
1. When Outlook opens, choose **Home** > **Show Taskpane**.

Next, try out the controls. The task pane will display information about the currently selected email item.
Expand Down
2 changes: 1 addition & 1 deletion Samples/blazor-add-in/word-blazor-add-in/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ This sample shows how to build a Word add-in using .NET Blazor technologies. Bla

1. Download or clone the [Office Add-ins samples repository](https://github.com/OfficeDev/Office-Add-in-samples).
1. Open Visual Studio 2022 and open the: **Office-Add-in-samples\Samples\blazor-add-in\word-blazor-add-in\word-blazor-add-in.sln** solution.
1. Choose **Debug** > **Start Debugging**. Or press F5 to start the solution.
1. Choose **Debug** > **Start Debugging**. Or press <kbd>F5</kbd> to start the solution.
1. When Word opens, choose **Sample Add-in** > **Show task pane** (if not already open).
1. Try out the controls on the task panes.
1. Try out the custom buttons on the **Sample Add-in** tab on the ribbon.
Expand Down
2 changes: 1 addition & 1 deletion Samples/dynamic-dpi/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ Now you can build and run the solution
1. On the menu bar choose **Build** > **Build Solution**.
> **Note:** Set your build target to **Win32** or **x64** to match the version of Microsoft Excel you will run (32-bit or 64-bit).
2. Set one of the projects as the startup project. For example, right-click (or select and hold) the **ExcelAddin1** project and choose **Set as StartUp Project**.
3. Choose **Start** (or press F5). The debugger will launch Excel and load the add-in.
3. Choose **Start** (or press <kbd>F5</kbd>). The debugger will launch Excel and load the add-in.

The task pane for the VSTO Add-in will appear. You can drag Excel to a monitor with a different DPI to see displayed information change. You can explore different scnearios by changing the **Template** and **Context** fields. Then choose **Open Top-level Form** and a top-level form will open using the settings you specified. You can drag it to monitors with different DPI settings to see how it handles the DPI changes.

Expand Down
2 changes: 1 addition & 1 deletion Samples/excel-open-in-teams/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Before you run the sample, you'll need to do a few things to make it work proper
## Run the sample

1. Press **F5** to build and debug the project. The Contoso Web application will open in a browser.
1. Press <kbd>F5</kbd> to build and debug the project. The Contoso Web application will open in a browser.

![Screenshot of Contoso web app with Products button on the ribbon](./images/contoso-web-app.png)

Expand Down
Loading

0 comments on commit d43ead6

Please sign in to comment.