個人サイト利用ケースの案内が追加されましたので、そちらも御覧ください。ブログサンプルに適用した例です。Webページとして公開できます。個人のブログを公開するハードルが下がりました。静的サイトを生成する手法です。雛形も用意されており、始めやすいですよね。デフォルトの状態から発展させていくときに、手詰まりになりがちです。いう理由でブロク構築が止まってしまうことがありました。記載されているように、Zennでパースできる記法はバリエーションが豊富です。パーザーを使ってみましょう。適用する例を示します。MarkdownパーザーとブログサイトのCSSで困っている方はご参照ください。導入するローカルで適用されたことを確認する今回はローカルで試します。作業ディレクトリで素直に導入します。blog-starterは2022/10/28時点、Next.js13.0.0だと動きません。devこんな感じの画面が見えればOKです。構成を覗いてみましょう。変換している箇所が導入ポイントになるはずです。変換しているようです。独自記法はうまく表示されないはずです。文書として_postsディレクトリに配置してみましょう。alert警告メッセージをここに:::当たり前ですがブログのサンプルに同じMarkdownを入れてもまだZennのように表示はされないですね。これを表示できるように改修します。導入方法が記載されていますが、ざっくり説明すると以下のような感じです。するアプリ全域で使うのであればAppコンポーネントでimportしてもOKzenn-embed-elementsブラウザ側で埋め込みコンテンツ(数式)を変換します。);}3.ローカルで適用されたことを確認するこれでOK...?起動して確認してみましょう。独自記法のところ、パースされてスタイルもあたってますね。埋め込みコンテンツを試す他の記法も確認しましょう。Gistすべて意図どおりに埋め込まれています。インストールして少しコードを変更しただけで導入できるのでありがたいですね。公開されているツールをサンプルブログに適用してみました。タイトル周りや一覧画面はさらに改修が必要かと思いますが、本文には意図どおり反映できました。使って個人ブログを構築したいけど、パーザーや記事のCSSで詰まっている...という方は、導入を検討してみてください。より固定クラスメソッド株式会社は「オープンな発想と高い技術力により、すべての人々の創造活動に貢献し続ける。」という経営理念のもと、クラウド、モバイル、ビッグデータ、音声認識技術のコンサルティングやシステム開発、運用サービスを提供しています。採用サイトwaddy_uGCPとRailsとNext.jsがんばります。Zennチームのテックブログです。Zennの開発・運用にまつわる技術的な知見を投稿します。クラスメソッドクラスメソッド公式YouTubeチャンネルバッジを贈って著者を応援しようバッジを受け取った著者にはZennから現金やAmazonギフトカードが還元されます。個人ブログに導入させていただきました!全体的なスタイリングはもちろん、リンクをカードにしてくれたり、codesandboxなどのサービスを簡単に埋め込めたりとてもありがたいです!こちらの記事を参考に導入するときに、こちらのissueの問題に当たったので共有いたします。zenn-embed-elementsのバージョンをv0.1.106に設定する必要があります。報告、ありがとうございました!ご存知のとおり、現在は最新バージョンが利用できるように整備済みです。1返信を追加waddy_uGCPとRailsとNext.jsがんばります。Proよくある質問LinksX(Twitter)GitHubメディアキットLegal利用規約プライバシーポリシ。