ブログでソースの実行結果を出すには

Question

ブログでソースの実行結果をはるにはどうしたらいいですか？
GitHubのGistを使ってプログに貼ろうと思うのですが、実行結果は最後にコメントなどで出すしかないのでしょうか？
jsなどの動きのあるものはユーザーが自分でコードを打ち込んでももらって実行してもらうしかないのでしょうか？

Answer 1

CodePenで書いたコードをブログに埋め込んでみてはいかがですか？

以下のページでCodePenのコードの埋め込み方法と埋め込みのサンプルが見られます。
Qiitaで記事にCodePenが埋め込めるようになりました

Comments

[退会済みユーザー]

そんな便利なものが！！
調べてみます！
回答ありがとうございます。

[退会済みユーザー]

質問なのですがCodePenを使えばソースも表示されるようなのでGistを張る必要もなくなりますか？

[HayatoKamono]

逆にCodePenでのコードを埋め込んだ上で尚、Gistを貼る必要は何かありますか？
もし無いのであれば、貼る必要はないかと思います。（自分にはma-さんが何をしたいのか分からないので明確な答えは出せません）

[退会済みユーザー]

そうですよね。
コードと実行結果が貼れればいいので、CodePen使ってみます！
丁寧にありがとうございました。

[yambejp]

HayatoKamonoさん！
CodePenとQiitaの連携機能はしりませんでした
さっそく試したところすごく便利ですね
情報ありがとうございました

[HayatoKamono]

お、お役に立てて良かったです！

Answer 2

一応, script要素にdisplay:blockを指定することで, そのWEBページで実行したスクリプトを直接スクリーンに表示させることは出来ます. ですから, 理屈の上ではスクリプトの実行結果とスクリプトのソース両方を一度に表示することは可能です.

・・・が全くおすすめはしません.（ブラウザごとに細かい分で使い勝手が変化します）
何らかのプラグイン・ライブラリ・フレームワークを導入・手作りすることをおすすめします.