Post

[HAI5014] Week 3: Mark It Up!

Posted
HAI5014 Week 3 - Human-AI interaction (by Dall-e)
HAI5014 Week 3 - Human-AI interaction (by Dall-e)
By Pim Kamphuis
4 min read
[HAI5014] Week 3: Mark It Up!

This week we will discuss the differences between programming and markup languages. While going hands-on, we will learn how to use GitHub Codespaces, work with version control and to write and preview Markdown files in our own repository.

Disclaimer: This blog provides instructions and resources for the workshop part of my lectures. It is not a replacement for attending class; it may not include some critical steps and the foundational background of the techniques and methodologies used. The information may become outdated over time as I do not update the instructions after class.

1. Programming vs. Markup Languages

  1. Let’s have a look at some examples of markup languages in my GitHub Repository

Markup languages describe document structures, enrich content for automated processing, and control presentation or formatting, without executing logic or computations.

Programming languages, in contrast, provide instructions for performing logic, computations, and algorithms to manipulate and process data.

2. Examples of Markup Languages

3. GitHub Codespaces

GitHub Codespaces allows you to write, run, and debug code directly in your repository. We can also use Codespaces to create, edit, and preview Markdown files easily in a containerized VS Code Studio-like environment. Today, let’s try to create a new Markdown file in our repository and edit it using Codespaces.

3.1. Create a new public repository

  1. Go to GitHub, login and find the ‘new’ button to create a new repository.

  2. Use the following settings:

    1. Repository template: No template
    2. Repository name my-first-MD
    3. Description: My first Markdown document for HAI-5014
    4. Select Public
    5. Use the default settings for the rest
    6. Click on Create repository

3.2. Create a new Markdown file

  1. Create a new file by clicking on the Add file button or selecting Creating a new file.

  2. Name the file first.md add some content.

    1. Write a title like This is my first markdown file and add some text like "Let me tell you about this awesome class called Human-AI Interaction"
    2. Commit the changes by clicking on the Commit changes button
    3. Use the standard commit message and click on Commit changes
    4. Check how your first file in your repository looks like
    5. Edit the file by clicking on the pencil icon in the top right corner
    6. Add some markdown syntax like # for headings, and make the class title italic by using * or ** for bold text.
    7. Save the changes by clicking on the Commit changes button
    8. In the commit message, write Added some markdown syntax to first.md and click on Commit changes
    9. Check the history of your file by clicking on the History button
    10. Click on your last commit to see the changes you made

3.3. Edit the Markdown file in Codespaces

Go back to the main page of your repository by clicking on the repository name in the top left corner, next to your username.

  1. Click on the Code button
  2. Select the Codespaces tab
  3. Select Create codespace on main and wait for the Codespaces environment to load. Once it’s ready, you can see the file first.md in the file explorer on the left side.
  4. Click on the file to open it and edit the content. You can use the preview button to see how your markdown file will look like on GitHub.

3.4. Get some Markdown Assistance

  1. Click on the extensions icon in the left sidebar
  2. Search for markdown and install the Markdown All in One and markdownlintextension
  3. Whenever your asked to trust the Publisher of the extension, click on Trust Publisher & Install
  4. Reopen the file first.md and see how the extension helps you to write markdown. You can also use VS Code Studio’s command palette to assist with your markdown file. (crtl+shift+p or cmd+shift+p)

Use the Soure Control tab to commit (and push) your changes to your repository.

3.5. Images

To use images in your GitHub repository, you can upload them to the repository or use an external link. For example, you can use the following syntax to include an external image in your markdown file

1

![Alt text](https://camphouse.me/assets/img/HAI5014-Week-2-header.jpg)

If you want to use your own image, you can upload it to your repository with the file explorer in Codespaces:

  1. Make a folder in your repository called img
  2. Upload your image to the img folder
  3. Use the following syntax to include your image in your markdown file (make sure to use the right filename)
1

![Description of my image](/img/your-image.jpg)

4. Homework: Draft your (first) readme.md

When you call a file readme.md in your repository, GitHub will display it on the front page of your repository. This is a great place to introduce your repository to others, explain what it is about, and how to use it.

For next week, prepare examples of what you think are chatbots, and what are bad chatbots. Draft the examples in a readme.md file in your repository, so we can discuss them in class next week.

Make sure that your page is structured and easy to read. Use headings, lists, images, and links to make your draft more engaging.

SKKU, HAI5014
GitHub Markdown
This post is licensed under CC BY 4.0 by the author.