Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
VS Code を使って快適にナレッジを Zenn にためる
Search
Kazuki Negoro
February 04, 2022
Programming
1
1.1k
VS Code を使って快適にナレッジを Zenn にためる
VS Code Meetup #18 - ドキュメント、ブログ、書籍執筆編
#vscodejp
Kazuki Negoro
February 04, 2022
Tweet
Share
More Decks by Kazuki Negoro
See All by Kazuki Negoro
ステートフルなアプリケーション のダウンタイムを 10 秒以下 にすることを目指して
negokaz
1
5.7k
Using Akka Cluster for a payment service
negokaz
7
4.4k
Other Decks in Programming
See All in Programming
Timeline エディター拡張入門
yucchiy
0
210
禅の心を手に入れよ
eltociear
1
430
Milestoner
bkuhlmann
1
420
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4.1k
Git Rebase
bkuhlmann
11
1.6k
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
320
パフォーマンスを求めてDBに機能を寄せる戦略
aoyagikouhei
0
110
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Deep Dive into React Stream/Serialize
mugi_uno
3
760
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.7k
Go製Webアプリケーションのエラーとの向き合い方大全、あるいはやっぱりスタックトレース欲しいやん / Kyoto.go #50
utgwkk
6
1.9k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Designing Experiences People Love
moore
136
23k
Infographics Made Easy
chrislema
238
18k
Into the Great Unknown - MozCon
thekraken
15
1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
How STYLIGHT went responsive
nonsquared
92
4.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
22
1.4k
Gamification - CAS2011
davidbonilla
77
4.6k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
323
20k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
Transcript
VS Code を使って快適に ナレッジを Zenn にためる 1 / 32
あなた誰? 根来 和輝 Negoro Kazuki 仕事 某SIer Scala/Akka/OSS開発 趣味 楽するためのツールを作る
@negokaz negokaz 2 / 32
過去作った VS Code の拡張機能 Live Server Preview installs installs 452k
452k HTML ファイルのプレビューを実現 ファイルを編集するとプレビューにリアルタイム反映 OpsScriptMD installs installs 96 96 サーバーサイドの運用作業の半自動化を目指した拡張機能 Markdown のプレビュー画面でコードブロックを実行 3 / 32
個人のナレッジどこにためてますか? 脳内 社内 Wiki ブログ ... 4 / 32
今日オススメしたいサービス https://zenn.dev/ 5 / 32
Zenn とは? 6 / 32
Zenn にナレッジをためると… 必要なときに自分のナレッジを簡単に参照できる チームメンバーへのナレッジの共有も簡単 他のエンジニアからサポートしてもらえるかもしれない 7 / 32
過去頂いたサポート 8 / 32
Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ (個人の感想です) 9 / 32
Zenn の特徴 Idea カテゴリがあり個人的意見も発信できる UI おしゃれ (個人の感想です) GitHub で記事や本の原稿を管理できる 10
/ 32
GitHub と連携すると嬉しいこと 記事や本の原稿は Markdown ファイルなので 使い慣れた VS Code で記事が書ける! textlint
プラグインで簡単なミスを自動チェックしたり 自分なりに環境を工夫しながら執筆できる Git に履歴が残るため過去記事のメンテが気軽にできる 11 / 32
Zenn と GitHub を連携する 簡単 2 ステップ 1. 記事や本のソースを格納するリポジトリの作成 2.
Zenn のダッシュボードから連携するリポジトリを指定 https://zenn.dev/zenn/articles/connect-to-github 12 / 32
記事公開までの流れ (GitHub と連携した場合) 13 / 32
公開前に仕上がりを確認したい 公式の Zenn CLI を使うと記事や本の仕上がりを ローカル環境で確認できる https://zenn.dev/zenn/articles/zenn-cli-guide 14 / 32
Zenn CLI でプレビューを開く方法 ① ターミナルでコマンドを実行 ❯ zenn preview Preview: http://localhost:8000
② ブラウザでプレビュー用の URL を開く 15 / 32
Zenn CLI を使ったときに感じたこと ローカルでサクサク執筆できる!便利! 16 / 32
Zenn CLI を使ったときに感じたこと ローカルでサクサク執筆できる!便利! プレビューするまでが少し面倒だな… 1. ターミナル開いてプレビューコマンド実行 2. VS Code
と(プレビューが表示された)ブラウザの 位置を調整して 3. 執筆中のコンテンツを選択して… 17 / 32
もっと楽したい 18 / 32
もっと楽したい VS Code の拡張を作って VS Code 内で プレビューできるようにしよう! 19 /
32
VSCode Zenn Editor 20 / 32
VSCode Zenn Editor 編集中のコンテンツ(記事・本)をプレビュー 21 / 32
VSCode Zenn Editor 編集中のコンテンツ(記事・本)をプレビュー コンテンツを一覧表示 22 / 32
VSCode Zenn Editor 編集中のコンテンツ(記事・本)をプレビュー コンテンツを一覧表示 コンテンツのテンプレート生成 23 / 32
編集中のコンテンツをプレビュー 24 / 32
編集中のコンテンツをプレビュー 拡張ないとき 1. ターミナル開いてプレビューコマンド実行 2. VS Code と(プレビューが表示された)ブラウザの 位置を調整して 3.
執筆中のコンテンツを選択して… 拡張あるとき 1. プレビューボタンを押す 25 / 32
コンテンツを一覧表示 26 / 32
コンテンツを一覧表示 タイトルから編集する原稿を 選択できる 27 / 32
コンテンツのテンプレート生成 (時間あればデモ) 28 / 32
インストール方法 1. Zenn CLI をインストール 2. VS Code のマーケットプレースで「Zenn Editor」を
検索 29 / 32
まとめ ナレッジを Zenn にためよう 社外秘情報は公開しないように注意 VSCode Zenn Editor 使ってみてください! 30
/ 32
不具合報告、新機能のアイデアなどお待ちしております! https://github.com/negokaz/vscode-zenn-editor/discussions 31 / 32
ライセンス表示 スライド中の絵文字 Twemoji” by Copyright 2021 Twitter, Inc and other
contributors is licensed under CC-BY 4.0 https://creativecommons.org/licenses/by/4.0/ 32 / 32