FazBrowse GitHub Viewer | Trending |
URL:
| Home
Tools: [Download Repo ZIP]   [Original HTTPS Page]

Formatting tweaks for easier regexp replace later · sureshcck/code-with-codespaces@68903b8 · GitHub

/ code-with-codespaces Public template
forked from skills/code-with-codespaces

Commit 68903b8

Browse files
heiskr
committed
Formatting tweaks for easier regexp replace later
1 parent c013c05 commit 68903b8

10 files changed

Lines changed: 84 additions & 47 deletions

‎.github/steps/1-first-codespace.md‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,11 @@
1+
<!--
2+
<<< Author notes: Step 1 >>>
3+
Choose 3-5 steps for your course.
4+
The first step is always the hardest, so pick something easy!
5+
Link to docs.github.com for further explanations.
6+
Encourage users to open new tabs for steps!
7+
-->
8+
19
## Step 1: Create your first codespace and push code
210

311
_Welcome to "Develop code using GitHub Codespaces and Visual Studio Code"! :wave:_
@@ -33,23 +41,23 @@ To begin developing using GitHub Codespaces, you can create a codespace from a t
3341
1. From inside the codespace in the VS Code explorer window, select the `index.html` file.
3442
1. Replace the **h1** header with the below:
3543

36-
```
37-
<h1>Hello from the codespace!</h1>
38-
```
44+
```html
45+
<h1>Hello from the codespace!</h1>
46+
```
3947

4048
1. Save the file.
4149
> **Note**: The file should autosave.
4250
1. Use the VS Code terminal to commit the file change by entering the following commit message:
4351

44-
```
45-
git commit -a -m "Adding hello from the codespace!"
46-
```
52+
```shell
53+
git commit -a -m "Adding hello from the codespace!"
54+
```
4755

4856
1. Push the changes back to your repository. From the VS Code terminal, enter:
4957

50-
```
51-
git push
52-
```
58+
```shell
59+
git push
60+
```
5361

5462
1. Your code has been pushed to your repository!
5563
1. Switch back to the homepage of your repository and view the `index.html` to verify the new code was pushed to your repository.

‎.github/steps/2-custom-image.md‎

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<!--
2+
<<< Author notes: Step 2 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
17
## Step 2: Add a custom image to your codespace!
28

39
_Nice work! :tada: You created your first codespace and pushed code using VS Code!_
@@ -15,23 +21,23 @@ Let's add a `devcontainer.json` file and add a custom image.
1521
1. Navigating back to your **Code** tab of your repository, click the **Add file** drop-down button, and then click `Create new file`.
1622
1. Type or paste the following in the empty text field prompt to name your file.
1723

18-
```
19-
.devcontainer/devcontainer.json
20-
```
24+
```
25+
.devcontainer/devcontainer.json
26+
```
2127

2228
1. In the body of the new **.devcontainer/devcontainer.json** file, add the following content:
2329

24-
```
25-
{
26-
// Name this configuration
27-
"name": "Codespace for Skills!",
28-
// Use the base codespace image
29-
"image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
30+
```jsonc
31+
{
32+
// Name this configuration
33+
"name": "Codespace for Skills!",
34+
// Use the base codespace image
35+
"image": "mcr.microsoft.com/vscode/devcontainers/universal:latest",
3036

31-
"remoteUser": "codespace",
32-
"overrideCommand": false
33-
}
34-
```
37+
"remoteUser": "codespace",
38+
"overrideCommand": false
39+
}
40+
```
3541

3642
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
3743
1. Create a new codespace by navigating back to the **Code** tab of your repository.
@@ -43,6 +49,6 @@ Let's add a `devcontainer.json` file and add a custom image.
4349
4450
1. Verify that your new codespace is is running, as you did previously.
4551

46-
Note the image being used is the default image provided for GitHub Codespaces. It includes runtimes and tools for Python, Node.js, Docker, and more. See the full list here: https://aka.ms/ghcs-default-image. Your development team can use any custom image that has the necessary prerequisites installed. For more information, see [codespace image](https://aka.ms/configure-codespace).
52+
Note the image being used is the default image provided for GitHub Codespaces. It includes runtimes and tools for Python, Node.js, Docker, and more. See the full list here: https://aka.ms/ghcs-default-image. Your development team can use any custom image that has the necessary prerequisites installed. For more information, see [codespace image](https://aka.ms/configure-codespace).
4753

4854
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

‎.github/steps/3-customize-codespace.md‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<!--
2+
<<< Author notes: Step 3 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
17
## Step 3: Customize your codespace!
28

39
_Nice work! :tada: You created a codespace with a custom image!_
@@ -11,7 +17,7 @@ Let's customize some settings in the `.devcontainer.json` file!
1117
1. Navigate to the `.devcontainer/devcontainer.json` file.
1218
1. Add the following customizations to the body of the file before the last `}`.
1319

14-
```
20+
```jsonc
1521
,
1622
// Add the IDs of extensions you want installed when the container is created.
1723
"customizations": {
@@ -26,7 +32,7 @@ Let's customize some settings in the `.devcontainer.json` file!
2632
]
2733
}
2834
}
29-
```
35+
```
3036

3137
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
3238
1. Create a new codespace by navigating to the landing page of your repository.
@@ -40,7 +46,7 @@ Let's customize some settings in the `.devcontainer.json` file!
4046
1. The `codespace.md` file should show up in the VS Code editor.
4147
1. The `copilot` extension should show up in the VS Code extension list.
4248

43-
This will add a VS Code extension as well as open a file on start up of the codespace.
49+
This will add a VS Code extension as well as open a file on start up of the codespace.
4450

4551
Next lets add some code to run upon creation of the codespace!
4652

@@ -49,10 +55,10 @@ Next lets add some code to run upon creation of the codespace!
4955
1. Edit the `.devcontainer/devcontainer.json` file.
5056
1. Add the following postCreateCommand to the body of the file before the last `}`.
5157

52-
```
58+
```jsonc
5359
,
5460
"postCreateCommand": "echo '# Writing code upon codespace creation!' >> codespace.md"
55-
```
61+
```
5662

5763
1. Click **Commit changes** and then select **Commit changes directly to the `main` branch**.
5864
1. Create a new codespace by navigating to the landing page of your repository.

‎.github/steps/4-personalize-codespace.md‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
<!--
2+
<<< Author notes: Step 4 >>>
3+
Start this step by acknowledging the previous step.
4+
Define terms and link to docs.github.com.
5+
-->
6+
17
## Step 4: Personalize your codespace!
28

39
_Nicely done customizing your codespace!_ :partying_face:
@@ -28,32 +34,33 @@ Let's see how this works!
2834
> Wait about **2 minutes** for the codespace to spin itself up.
2935
3036
1. Verify your codespace is running. The browser should contain a VS Code web-based editor and a terminal should be present such as the below:
37+
3138
![codespace1](https://user-images.githubusercontent.com/26442605/207355196-71aab43f-35a9-495b-bcfe-bf3773c2f1b3.png)
3239

3340
1. From inside the codespace in the VS Code explorer window, create a new file `setup.sh`.
3441
1. Add the following code inside of the file:
3542

36-
```
37-
#!/bin/bash
43+
```bash
44+
#!/bin/bash
3845

39-
sudo apt-get update
40-
sudo apt-get install sl
41-
```
46+
sudo apt-get update
47+
sudo apt-get install sl
48+
```
4249

4350
1. Save the file.
4451
> **Note**: The file should autosave.
4552
1. Commit the file changes. From the VS Code terminal enter:
4653

47-
```
48-
git add setup.sh --chmod=+x
49-
git commit -m "Adding setup.sh from the codespace!"
50-
```
54+
```shell
55+
git add setup.sh --chmod=+x
56+
git commit -m "Adding setup.sh from the codespace!"
57+
```
5158

5259
1. Push the changes back to your repository. From the VS Code terminal, enter:
5360

54-
```
55-
git push
56-
```
61+
```shell
62+
git push
63+
```
5764

5865
1. Switch back to the homepage of your repository and view the `setup.sh` to verify the new code was pushed to your repository.
5966
1. Close the codespace web browser tab.
@@ -65,9 +72,9 @@ git push
6572
1. Verify the `setup.sh` file is present in your VS Code editor.
6673
1. From the VS Code terminal, type or paste:
6774

68-
```
69-
/usr/games/sl
70-
```
75+
```shell
76+
/usr/games/sl
77+
```
7178

7279
1. Enjoy the show!
7380
1. Wait about 20 seconds then refresh this page (the one you're following instructions from). [GitHub Actions](https://docs.github.com/en/actions) will automatically update to the next step.

‎.github/steps/X-finish.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
<!--
2+
<<< Author notes: Finish >>>
3+
Review what we learned, ask for feedback, provide next steps.
4+
-->
5+
16
## Finish
27

38
_Congratulations friend, you've completed this course!_

‎.github/workflows/1-first-codespace.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Step 1, 1-Create codespace and push code
1+
name: Step 1, Create codespace and push code
22

33
# This step triggers after push to main.
44
# This workflow updates from step 1 to step 2.

‎.github/workflows/2-custom-image.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Step 2, 2-custom image check
1+
name: Step 2, Custom image check
22

33
# This step triggers after First Codespace.
44
# This workflow updates from step 2 to step 3.

‎.github/workflows/3-customize-codespace.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Step 3, 3-Customize Codespace
1+
name: Step 3, Customize Codespace
22

33
# This step triggers after we push to main.
44
# This workflow updates from step 3 to step 4.

‎.github/workflows/4-personalize-codespace.yml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Step 4, 4-Personalize your Codespace
1+
name: Step 4, Personalize your Codespace
22

33
# This step triggers after push to main#setup.sh.
44
# This workflow updates from step 4 to step X.

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@ In this course, you will:
6262

6363
<footer>
6464

65+
<!--
66+
<<< Author notes: Footer >>>
67+
Add a link to get support, GitHub status page, code of conduct, license link.
68+
-->
69+
6570
---
6671

6772
Get help: [Review the GitHub status page](https://www.githubstatus.com/)

0 commit comments

Comments
 (0)
Back | FazBrowse Home | New Git URL