diff --git a/.github/workflows/auto-label-prs.yml b/.github/workflows/auto-label-prs.yml index 12aed3514b..a9d08b7186 100644 --- a/.github/workflows/auto-label-prs.yml +++ b/.github/workflows/auto-label-prs.yml @@ -17,6 +17,6 @@ jobs: runs-on: ubuntu-latest steps: # See labeling configuration in the `.github/labeler.yml` file - - uses: actions/labeler@5f867a63be70efff62b767459b009290364495eb + - uses: actions/labeler@e54e5b338fbd6e6cdb5d60f51c22335fc57c401e with: repo-token: '${{ secrets.GITHUB_TOKEN }}' diff --git a/components/playground/ArticleMarkdown.tsx b/components/playground/ArticleMarkdown.tsx index 131825b59d..7f8a9fdc37 100644 --- a/components/playground/ArticleMarkdown.tsx +++ b/components/playground/ArticleMarkdown.tsx @@ -5,6 +5,7 @@ import ReactMarkdown from 'react-markdown' import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter' import { vs, vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism' import gfm from 'remark-gfm' +import rehypeRaw from 'rehype-raw' import { MarkdownContent } from 'components/ui/MarkdownContent' @@ -22,6 +23,9 @@ export const ArticleMarkdown = ({ className, children }: Props) => { { diff --git a/components/playground/PlaygroundContentBlock.tsx b/components/playground/PlaygroundContentBlock.tsx index 5a3928f870..5f2bed328a 100644 --- a/components/playground/PlaygroundContentBlock.tsx +++ b/components/playground/PlaygroundContentBlock.tsx @@ -41,6 +41,7 @@ export const PlaygroundContentBlock = ({ sectionIndex, contentBlock }: Props) => const isActive = sectionIndex === activeSectionIndex const anchorLink = getAnchorLink(contentBlock.title || '') const showDivider = !isActive && activeSectionIndex - 1 !== sectionIndex + return (
Shift + Command + P / Ctrl + Shift + P), then start typing "dev container". Select **Codespaces: Add Development Container Configuration Files...**. ![Codespaces: Add Development Container Configuration Files... in the command palette](/assets/images/help/codespaces/add-prebuilt-container-command.png) 2. For this example, click **C# (.NET)**. If you need additional features you can select any container that’s specific to C# (.NET) or a combination of tools such as C# (.NET) and MS SQL. - + ![Select C# (.NET) option from the list](/assets/images/help/codespaces/add-dotnet-prebuilt-container.png) 3. Click the recommended version of .NET. ![.NET version selection](/assets/images/help/codespaces/add-dotnet-version.png) 4. Accept the default option to add Node.js to your customization. ![Add Node.js selection](/assets/images/help/codespaces/dotnet-options.png) 5. Select any additional features to install and click **OK**. - 6. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. + 6. Access the command palette (Shift + Command + P / Ctrl + Shift + P), then start typing "rebuild". Select **Codespaces: Rebuild Container**. ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png) `, }, @@ -189,15 +189,15 @@ const article: PlaygroundArticleT = { "streetsidesoftware.code-spell-checker" ], \`\`\` - + 3. Uncomment the \`postCreateCommand\` to restore dependencies as part of the codespace setup process. - + \`\`\`json{:copy} // Use 'postCreateCommand' to run commands after the container is created. "postCreateCommand": "dotnet restore", \`\`\` - 4. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. + 4. Access the command palette (\`Shift + Command + P\`/ \`Ctrl + Shift + P\`), then start typing "rebuild". Select **Codespaces: Rebuild Container**. ![Rebuild container option](/assets/images/help/codespaces/codespaces-rebuild.png) Rebuilding inside your codespace ensures your changes work as expected before you commit the changes to the repository. If something does result in a failure, you’ll be placed in a codespace with a recovery container that you can rebuild from to keep adjusting your container. @@ -253,26 +253,26 @@ const article: PlaygroundArticleT = { "INSTALL_AZURE_CLI": "false" } }, - + // Set *default* container specific settings.json values on container create. "settings": { "terminal.integrated.shell.linux": "/bin/bash" }, - + // Add the IDs of extensions you want installed when the container is created. "extensions": [ "ms-dotnettools.csharp" ], - + // Use 'forwardPorts' to make a list of ports inside the container available locally. // "forwardPorts": [5000, 5001], - + // Use 'postCreateCommand' to run commands after the container is created. // "postCreateCommand": "dotnet restore", - + // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root. "remoteUser": "vscode" - } + } `, }, '1': { @@ -282,22 +282,22 @@ const article: PlaygroundArticleT = { # [Choice] .NET version: 5.0, 3.1, 2.1 ARG VARIANT="5.0" FROM mcr.microsoft.com/vscode/devcontainers/dotnetcore:0-\${VARIANT} - + # [Option] Install Node.js ARG INSTALL_NODE="true" ARG NODE_VERSION="lts/*" RUN if [ "\${INSTALL_NODE}" = "true" ]; then su vscode -c "umask 0002 && . /usr/local/share/nvm/nvm.sh && nvm install \${NODE_VERSION} 2>&1"; fi - + # [Option] Install Azure CLI ARG INSTALL_AZURE_CLI="false" COPY library-scripts/azcli-debian.sh /tmp/library-scripts/ RUN if [ "$INSTALL_AZURE_CLI" = "true" ]; then bash /tmp/library-scripts/azcli-debian.sh; fi \ && apt-get clean -y && rm -rf /var/lib/apt/lists/* /tmp/library-scripts - + # [Optional] Uncomment this section to install additional OS packages. # RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \ # && apt-get -y install --no-install-recommends - + # [Optional] Uncomment this line to install global node packages. # RUN su vscode -c "source /usr/local/share/nvm/nvm.sh && npm install -g " 2>&1 `, diff --git a/components/playground/editor/Editor.tsx b/components/playground/editor/Editor.tsx index e94a751eb5..3ec8774c4a 100644 --- a/components/playground/editor/Editor.tsx +++ b/components/playground/editor/Editor.tsx @@ -102,7 +102,7 @@ export const Editor: React.FC = ({ article }) => { className = 'color-bg-accent' } } - return { style: { display: 'block' }, class: className } + return { style: { display: 'block' }, className } }} lineNumberStyle={{ minWidth: '3.25em' }} >