search
LoginSignup
11

More than 1 year has passed since last update.

posted at

updated at

Organization

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

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

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

<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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
11