2022/05/18

Markdown の使い方

RICORA Programming Team

© 2022 RICORA Programming Team
2022/05/18

はじめに

  • こんばんは。来ていただきありがとうございます。😃

  • 簡単な演習もつけてます。手を動かして学んでいきましょう!🫠

© 2022 RICORA Programming Team
2022/05/18

Markdown について

  • Markdown はマークアップ言語の 1 つであり、変換ツールを噛ますことにより、HTML や LaTeX\LaTeX などの別のマークアップ言語 / 組版言語に変換をすることができる。

  • また、Pandoc や Marp、SATySFi などを用いれば高品質な PDF を生成することも可能。いろいろなツールを使うと様々なことができる。

  • 最近の技術系プラットフォームでは Markdown 記法をサポートしているものが多い(GitHub, Discord, Qiita, Zennなど)。そのため、Markdown はプログラミングを学ぶ上で知っておいて損はない。

© 2022 RICORA Programming Team
2022/05/18

補足: HTMLについて

  • HTMLはHyperText Markup Languageの頭文字をとったもの。

  • ウェブサイトの構造を記述する言語

  • でも書くのが結構面倒くさい

このスライド:

<h1> 補足: HTMLについて </h1>
<ul>
  <li> HTML... </li>
  <li> ウェブサイトの... </li>
  <li> でも書くのが... 面倒 </li>
</ul>
© 2022 RICORA Programming Team
2022/05/18

補足:LaTeX\LaTeX について

  • 組版ソフトウェア。組版は文字を組んでくれるってこと。

  • これも結構書くのが面倒くさい(個人的な意見ですが。。。)

  • でも式がきれいに書ける+枯れているので技術的保証がある

構文とかが気になる人は自分で見てみてね

© 2022 RICORA Programming Team
2022/05/18

もっと補足:WYSIWYG

  • MarkdownなんてよくわからないものじゃなくてWordでよくね?🤔
  • ところでMicrosoft Wordなどのようなエディタで見えるものをそのまま出力できるソフトのことを総称してWYSIWYGといいます。
    • What You See Is What You Get(見たままが得られる)の頭文字
  • コンピューターに不慣れな者でも簡単にそれなりの見た目の文章を作成できるが…
© 2022 RICORA Programming Team
2022/05/18

もっと補足:WYSIWYG

  • 以下の理由で嫌われやすい
    • ファイルがプレーンテキストではない
      • なのでGit管理ができない
      • なのでエディタの選択肢が限られる
    • 文章構造とデザインの分離ができない
      • できないわけではないが見た目の変更は簡単に行えてしまうため、正しく作成された文書も熟練していない者が加筆すると章立てや見出しの設定が破壊され悲惨なことに…
© 2022 RICORA Programming Team
2022/05/18

Markdown のメリット

HTMLとかLaTeX\LaTeXで表現できることはいろいろあるんだけど、書くのがめんどい
\longrightarrow Markdownを使おう!

Markdownのいいところ

  • HTMLやLaTeX\LaTeXなどと比べると、とても簡単に書くことができる。

  • 覚えやすい記述方式である。

  • 数式や表などを入力できる。

© 2022 RICORA Programming Team
2022/05/18

VS Code

© 2022 RICORA Programming Team
2022/05/18

Markdown の記述方法

実際にどういう書き方をするか見ていこう。

このスライドで触れるもの:

  • 見出し h1...h6
  • 段落・区切り線・ 箇条書き
  • 表・数式
  • リンク・画像・ソースコード(プログラム)の埋め込み

すべて上に表示例、下にmdで書く際の書式になっている

© 2022 RICORA Programming Team
2022/05/18

見出し

見出しはこんな感じで書ける:

h1

# h1

h2

## h2
© 2022 RICORA Programming Team
2022/05/18

見出し

h3とh4はレポートの中で節とかを記述するときに使う

h3

### h3

h4

#### h4
© 2022 RICORA Programming Team
2022/05/18

見出し

h5とh6はあんまり使わないかも。

h5
##### h5
h6
###### h6
© 2022 RICORA Programming Team
2022/05/18

段落

空の行を一行挿入するか、半角スペースを行末に2つ挿入すると改行できる。

東京理科大学

電子計算機
研究会

東京理科大学
[空]
電子計算機__
研究会
© 2022 RICORA Programming Team
2022/05/18

区切り線

3種類あるけど全部同じ区切り線になる。

---
あああ
___
あああ
***
あああ
© 2022 RICORA Programming Team
2022/05/18

箇条書き

行頭に半角ハイフン ( - ) + スペースを入れる。

  • RICORA
- RICORA
© 2022 RICORA Programming Team
2022/05/18

引用

半角大なり ( > ) を行頭に書く。途中で ( > ) を増やすことにより 2 段引用できる。

大井川 波に塵なし 夏の月

松尾芭蕉

> 大井川 波に塵なし 夏の月
>  > 松尾芭蕉
© 2022 RICORA Programming Team
2022/05/18

リンク

説明とリンクをそれぞれ角括弧、丸括弧で書く

RICORA 言語班

[RICORA 言語班](https://alg.tus-ricora.com/)
© 2022 RICORA Programming Team
2022/05/18

画像

リンクに感嘆符をつけるだけ。かんたんだね。

![説明](URL)

RICORA

![RICORA](https://avatars.githubusercontent.com/u/33452053)
© 2022 RICORA Programming Team
2022/05/18

数式

$$で囲った間に TeX\TeX で書いた式を入れれば式として表示される。

(i=1j=iAj)=0\left(\bigcap_{i=1}^\infty\bigcup_{j=i}^\infty A_j\right)=0

$\left(\bigcap_{i=1}^\infty\bigcup_{j=i}^\infty A_j\right)=0$
© 2022 RICORA Programming Team
2022/05/18

一行目に列名、二行目に揃え方、三行目以降にデータ

指定なし 中央揃え 右揃え 左揃え
|指定なし|中央揃え|右揃え|左揃え|
| - | :-: | -: | :- |
|あ|い|う|え|
© 2022 RICORA Programming Team
2022/05/18

ソースコード(プログラム)

```で文字を囲うことによりコード記述になる。インデントでも代用可。

#include <iostream>
int main() {
    std::cout << "Hello, World!" << std::endl;
}
``` C++
#include <iostream>
int main() {
  std::cout << "Hello, World!" << std::endl;
}
```
© 2022 RICORA Programming Team
2022/05/18

ソースコード(プログラム)

行中の引用はバッククオートで囲うとできる。

print('Hello, world!')のように埋め込むことができる。

`print('Hello, world!')`のように埋め込むことができる。
© 2022 RICORA Programming Team
2022/05/18

Markdownで自己紹介

  • いま学んだことを使って自己紹介を書いてみましょう。

  • 注意とか

    • わからないことは悪いことではありません。上級生に聞いて🆗
    • スライドを手元においておくと書きやすいかも
    • DON'T PANIC! 周りのペースが早くても焦らずに取り組もう
    • 質問がある場合は挙手していただけると助かります🙇
© 2022 RICORA Programming Team
2022/05/18

VSCode をインストールしよう

https://alg-wiki.tus-ricora.com/vscode-tutorial/

上のリンクにアクセスして、導入方法の節の手順に従ってください。

分からない・どこかでインストール中断した場合は上級生に聞いてください。

© 2022 RICORA Programming Team
2022/05/18

Markdownを使う準備

  • VS Codeを開き、File → New Text File → Select a language → Markdown と入力

  • 試しにこんな感じのことを書いてみる

    # example
    
    ## こんにちは
    
    はろー
    

Ctrl + Shift + V (Windows) / Command + Shift + V (Mac)で確認

© 2022 RICORA Programming Team
2022/05/18

Markdownで自己紹介

それでは、Markdownで自己紹介を書いてみましょう。

書いてほしいこと

  • 名前 or ハンドルネーム (h2)
  • 学科と学年 (表)
  • RICORA に入ってやりたいこと (ソースコードで)
  • 各種SNS もしくは何かしらのホームページ (リンクで)
© 2022 RICORA Programming Team
2022/05/18

フォーマット

自己紹介(h1)

名前 or ハンドルネーム (h2)

学科 学年
(なんちゃら科) nn

やりたいこと(h2)

(やりたいことの内容 例: Web 開発)
© 2022 RICORA Programming Team
2022/05/18

フォーマット - 続き

SNS / Webサイト(h2)

Twitter TUS

  • こんな感じで(h1)、(h2)と書かれているものも含めて書いてください

  • 終わったら挙手して上級生に見せてね

  • SNSのアカウントの記載はもちろん任意です。嫌だったら理科大のリンクをつかってね

© 2022 RICORA Programming Team
2022/05/18

ご清聴ありがとうございました

© 2022 RICORA Programming Team