wordpressのFlutterブログにCodePenを導入！

こんにちは。マークです。

今まで、Flutterの技術ブログを書いていて、

マーク

コードの埋め込みがイマイチだなぁ・・・

ってずっと思ってました。

しかし、CodePenを使えば、

つまり最高です。

ちょっと今回はテストをかねて、この記事でやってみようかな。

CodePen × Flutterのドキュメント↓

CodePen Blog

 

2 users

12 pockets

Flutter on CodePen – CodePen Blog

https://blog.codepen.io/2020/04/15/flutter-on-codepen/

Have you seen Flutter? It’s Google’s UI framework for building cross-platform apps. You write Flutter apps in the modern programming language Dart. Flutter packages bring app development to life fast. Flutter apps compile to honest-to-god native apps for iOS and Android and a web app and a desktop app. There have been plenty of other

実際に埋め込むとこんな感じ。

See the Pen
test by Maaku Saito (@makumaaku)
on CodePen.

CodePenに登録

codepen.io

 

459 tweets

828 users

11120 pockets

CodePen

https://codepen.io

An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.

こちらから、CodePenに登録してください。

右上のSign Upから登録できます。

Flutter Penの使用

画面左側にあるCREATE→Penのところに、Flutter Penというものがあります。

ここでFlutter Penを選択すると、コーディングできるページに遷移します。

ブログに埋め込みたいものをコーディングしてください！

WordPress(ブログ)への埋め込み

コーディングが完了したら、コーディング画面の上部のSaveボタンで保存してください。

保存が完了すると、画面の最下部に複数のボタンが表示されます。

この中のEmbed(埋め込む)ボタンを押してください。

上の画像では右から３番目ですね。

そうすると、上のような画面が出てくるので、

テキストエディターの中にそのまま貼り付けるだけです。

ビジュアルエディタで見ると以下のように変な感じになっていますが、プレビューで見てみるとうまくいっていることがわかりますね！

まとめ

いかがでしたでしょうか。

CodePenを使えば、あなたの記事は最高に見やすく、わかりやすくなるはずです！

ぜひ、参考にしてください^^