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


Qiitaにインラインで埋め込み表示を試してみます。

# コード

QiitaのシンタックスハイライトはRougeを使用しています。
Webサイト制作マークアップ系の言語をまとめてみました。

長いコードで威力を発揮する色表示。
わかりやすい記事のために取り入れたいです。

```HTML: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:CSS
body {
    font-size: 12pt;
    background: #fff url(temp.png) top left no-repeat;
}
```
```SCSS:SCSS
@for $i from 1 through 3 {
  .item-#{$i} {
    width: 2em * $i;
  }
}
```
```php:php
<?php
  print("Hello {$world}");
?>
```
```JavaScript:JavaScript
$(document).ready(function() { alert('ready!'); });
```
```console:console
# prints "hello, world" to the screen
~# echo Hello, World
Hello, World

# don't run this
~# rm -rf --no-preserve-root /
```
```Markdown: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

<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>

```HTML
<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で表示ができませんでした。
（ご存知の方いらっしゃったら教えてください ＞＜）


```HTML
<script src="https://gist.github.com/harumi-sato/4282769a4f181c6810aa.js"></script>
```

# SNS系

## Twitter

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

<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>

```
<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>

```HTML
<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)

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