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系

Twitter

プログラムの参考になるツイートを埋め込める。

ひさしぶりにWordPress実装でハマった。解決できてよかた。
— FLAT サトウハルミ (@uzu) 2018年8月17日

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">ひさしぶりにWordPress実装でハマった。解決できてよかた。</p>&mdash; 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>

画像

![Alt text](https://i.gyazo.com/631356953f85cd6ddd93ef22a33057f4.png)

Qiitaに埋め込みできるいろいろ

コード