Using Zenn Preview on github.dev

Introduction

I look forward to comments or edit requests on GitHub for any corrections or additions.

I heard that Zenn previews can be used on github.dev, so I tried it out.

The published extension is a beta version.

How to Open github.dev

You can open it by pressing . in the repository you want to edit.
Alternatively, it can be opened at https://github.dev/username/repository-name.

Click here for a detailed explanation of the web-based editor.

https://docs.github.com/ja/codespaces/the-githubdev-web-based-editor

It looks like this when you open it.

Installing the Extension

Select Extensions from the sidebar and search for zenn.
Install the extension shown in the image below.

How to Use

The Zenn logo will be added to the sidebar, so click on it.
Once clicked, a list of articles will be displayed as shown below.

Clicking the icon next to an article will display the preview.

Since it's running on VS Code, you can also use the split view.

You can also create articles and books.

Impressions

It is very convenient because I can preview articles when writing from an iPad while on the go. Since the web-based editor is free, I want to continue using it.

Points of Dissatisfaction

• The preview disappears when reloading

References

https://zenn.dev/zenn/articles/usage-github-dev