Qiitaにインラインで埋め込み表示を試してみます。
コード
QiitaのシンタックスハイライトはRougeを使用しています。
Webサイト制作マークアップ系の言語をまとめてみました。
長いコードで威力を発揮する色表示。
わかりやすい記事のために取り入れたいです。
HTML
<html>
<head><title>Title!</title></head>
<body>
<p id="foo">Hello, World!</p>
<script type="text/javascript">var a = 1;</script>
<style type="text/css">#foo { font-weight: bold; }</style>
</body>
</html>
CSS
body {
font-size: 12pt;
background: #fff url(temp.png) top left no-repeat;
}
SCSS
@for $i from 1 through 3 {
.item-#{$i} {
width: 2em * $i;
}
}
php
<?php
print("Hello {$world}");
?>
JavaScript
$(document).ready(function() { alert('ready!'); });
console
# prints "hello, world" to the screen
~# echo Hello, World
Hello, World
# don't run this
~# rm -rf --no-preserve-root /
Markdown
Markdown has cool [reference links][ref 1]
and [regular links too](http://example.com)
Rouge
http://rouge.jneen.net/v3.15.0/css/
Qiitaでシンタックスハイライト可能な言語一覧 - Qiita
https://qiita.com/Qiita/items/e84f5aad7757afce82ba
プログラム系
Codepen
See the Pen 選択の背景色をCSSで指定 by harumi-sato (@harumi-sato) on CodePen.
<p data-height="265" data-theme-id="0" data-slug-hash="RBXVQo" data-default-tab="css,result" data-user="harumi-sato" data-pen-title="選択の背景色をCSSで指定" class="codepen">See the Pen <a href="https://codepen.io/harumi-sato/pen/RBXVQo/">選択の背景色をCSSで指定</a> by harumi-sato (<a href="https://codepen.io/harumi-sato">@harumi-sato</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
gist（埋め込み表示NG）
gistはJavaScript記述なのでQiitaで表示ができませんでした。
（ご存知の方いらっしゃったら教えてください ＞＜）
<script src="https://gist.github.com/harumi-sato/4282769a4f181c6810aa.js"></script>
SNS系
プログラムの参考になるツイートを埋め込める。
ひさしぶりにWordPress実装でハマった。解決できてよかた。
— FLAT サトウ ハルミ (@uzu) 2018年8月17日
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ひさしぶりにWordPress実装でハマった。解決できてよかた。</p>— FLAT サトウ ハルミ (@uzu) <a href="https://twitter.com/uzu/status/1030422267866566657?ref_src=twsrc%5Etfw">2018年8月17日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
YouTube
動画の埋め込みに対応。
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ucbp-Ej5RpI" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
画像
