マークダウンを使って見やすい綺麗な記事を投稿しよう【#Steemit-jp】

in #japanese7 years ago

マークダウンとは?


"普通に投稿しようとすると、記事はこのような見た目になりますが、"
"マークダウンを使うとこんな風にできたり、"
"こんな風にできたりします。"

以下に、現段階でsteemitで使いそうなマークダウンを全部まとめました。

使い方


- YouTube 動画の埋め込み

引用元:https://steemit.com/basic/@magnebit/some-basic-html-formatting-in-steem

書き方:youtubeの共有ボタンから、URLをコピーして、貼り付ける(だけ)
※画像参照
copy_origin.PNG

結果


- 太字

書き方:**内容**
結果内容


- 強調(イタリック)

書き方:*内容*
結果:内容


- 見出し

※見出しは文頭(文の最初)になければ機能しません
↓↓書き方↓↓
# 大見出し
## 中見出し
### 小見出し
#### さらに小さい見出し
##### もっと小さい見出し
###### 最小の見出し

↓↓結果↓↓

大見出し

中見出し

小見出し

さらに小さい見出し

もっと小さい見出し
最小の見出し

- 仕切り線

※文頭のみ使えます
↓↓書き方↓↓
---
↓↓結果↓↓



- 取り消し線

書き方:~~内容~~
結果内容


- リスト

書き方
1. 内容その1
2. 内容その2
* 番号無しのリスト1
* 番号無しのリスト2
結果

  1. 内容その1
  2. 内容その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

Sort:  

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>

   使うと、こんな感じで回り込めます。   
とりあえずこの3つがあれば、新聞のようなおしゃれポストはできるようになります!

ありがとうございます!勉強になります!

はじめまして
フォローさせていただきました!
よろしくお願いします(o^^o)

マークアップ参考にさせていただきます

Congratulations @kaz-jp! You received a personal award!

Happy Birthday! - You are on the Steem blockchain for 2 years!

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!