マークダウンを使って見やすい綺麗な記事を投稿しよう【#Steemit-jp】
マークダウンとは?
"普通に投稿しようとすると、記事はこのような見た目になりますが、"
"マークダウンを使うとこんな風にできたり、"
"こんな風にできたりします。"
以下に、現段階でsteemitで使いそうなマークダウンを全部まとめました。
使い方
- YouTube 動画の埋め込み
引用元:https://steemit.com/basic/@magnebit/some-basic-html-formatting-in-steem
書き方:youtubeの共有ボタンから、URLをコピーして、貼り付ける(だけ)
※画像参照
結果:
- 太字
書き方:**内容**
結果:内容
- 強調(イタリック)
書き方:*内容*
結果:内容
- 見出し
※見出しは文頭(文の最初)になければ機能しません
↓↓書き方↓↓
# 大見出し
## 中見出し
### 小見出し
#### さらに小さい見出し
##### もっと小さい見出し
###### 最小の見出し
↓↓結果↓↓
大見出し
中見出し
小見出し
さらに小さい見出し
もっと小さい見出し
最小の見出し
- 仕切り線
※文頭のみ使えます
↓↓書き方↓↓
---
↓↓結果↓↓
- 取り消し線
書き方:~~内容~~
結果:内容
- リスト
書き方:
1. 内容その1
2. 内容その2
* 番号無しのリスト1
* 番号無しのリスト2
結果:
- 内容その1
- 内容その2
- 番号無しのリスト1
- 番号無しのリスト2
- ハイパーリンク(別ページへのリンク)
書き方:
- 一般的なリンク
[グーグルに遷移するよ](https://www.google.com) - マウスを載せたときに、遷移先のタイトルが見える親切リンク
[マウスを載せるとタイトルが見えるはず](https://www.google.com "見せたいタイトル")
結果:
グーグルに遷移するよ
マウスを載せるとタイトルが見えるはず
※タイトル確認はプレビュー画面で動作せず:2017/6/8時点
- 画像イメージ
画像引用元:https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
書き方:
※入力ボックス下のselecting themをクリックして画像を選べば、自動的にマークダウンに変換してくれます
直接URLを記載:
![画像が見えないときに表示する文字](画像のurl "タイトル")参照する方式:
![見えないとき][logo]
[logo]: 画像URL "タイトル2"
結果:
- プログラムコードっぽい背景
書き方:`int i = 2017;`
結果:int i = 2017
;
※もっとプログラムっぽくする
書き方:``` var s = "JavaScript syntax highlighting";
alert(s);```
- テーブル
書き方:
| 名前 | 年齢 | 結婚 |
| -------- |:------:| -----:|
| 田中 | 35 | 未 |
| 山本 | 35 | 済 |
結果:
名前 | 年齢 | 結婚 |
---|---|---|
田中 | 35 | 未 |
山本 | 35 | 済 |
- 改行
習うより慣れたほうが早いです。
例えば、1行空行を挿入するには、2回enterを押して改行する必要があります。
この文と上の文の間には入力画面上では空行が2行ありますが、プレビューでは1行です。
- 引用
書き方:
> wikipediaから引用しました。
結果:
wikipediaから引用しました。
- HTMLも使えます
<b>例えばこのくらいは使えます</b>
<span style="color:#80BFFF">こういったものは使えません</span>
<font color="red">こういう色指定は一切できないようです</font>
以上が現時点でネットに転がっているおおよそ全てのsteemitで使用できるマークダウンになります。
どれもたいてい組み合わせて使えるようになっています。色々試してみてください。
betaという事ですから、バグもいくつかあるでしょう。
何かわからない事があれば、遠慮なく聞いてください。(技術者風)
※以下、主な翻訳・引用元
リンク先は英語です
https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet
https://steemit.com/basic/@magnebit/some-basic-html-formatting-in-steem
CSSとか設定出来たりするんでしょうか?
仮想通貨の記事、勉強させていただいています。
記事を漁ってみましたが、現状CSSは使えないようです。
しかしCSSほど便利ではありませんが、classを3つだけ定義してくれているようです。
<html>
<div class="pull-right">
テキストや画像が右寄せになります。
</div>
<div class="pull-left">
テキストや画像が左寄せになります。
</div>
<div class="text-justify">
新聞のように行の長さが調整される?そうです。
この3つが使える事はsteemitのソースから確認できました。
GitHub Steemit
英語での記事も1件だけ....見つかりました。
</div>
</html>
ありがとうございます!勉強になります!
はじめまして
フォローさせていただきました!
よろしくお願いします(o^^o)
マークアップ参考にさせていただきます
Congratulations @kaz-jp! You received a personal award!
You can view your badges on your Steem Board and compare to others on the Steem Ranking
Vote for @Steemitboard as a witness to get one more award and increased upvotes!