コンテンツにスキップ
{/* SVGアイコン */} GitHubリポジトリ {/* SVGアイコン */} フォーラム {/* SVGアイコン */} RSSニュースフィード

リビングスタイルガイド

このウェブサイトのすべての色、タイポグラフィ、UIパターン、およびコンポーネントの便利なコレクションです。該当する場合、コンポーネントのSassパーシャルおよび/またはJekyllインクルードへのリンクが、一般的な使用方法の簡単な説明とともに提供されます。

コンポーネント

属性

名前
Crystal
OS
Linux
MacOS
Windows
バージョン
1.11.2
コード
<dl class="attributes">
  <dt>Name</dt>
  <dd>Crystal</dd>
  <dt>OS</dt>
  <dd>Linux</dd>
  <dd>MacOS</dd>
  <dd>Windows</dd>
  <dt>Version</dt>
  <dd>1.11.2</dd>
</dl>

本の著者

インクルードパーシャル: _includes/components/book-authors.html

Author's picture

Lorem ipsum dolor sit amet. (仮テキスト)

Author's picture

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea. (仮テキスト)

コード
<div class="book-authors">
    <div class="book-author">
      <img class="book-author-icon" src="/assets/learning/george.png" alt="Author's picture" />
      <p class="small">Lorem ipsum dolor sit amet.

      </p>
    </div>
    <div class="book-author">
      <img class="book-author-icon" src="/assets/learning/guilherme.jpg" alt="Author's picture" />
      <p class="small">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem
veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione.
Id vel error quia ipsam sit saepe hic at amet excepturi ea.

      </p>
    </div>
</div>

本のプレゼンター

インクルードパーシャル: _includes/components/book-presenter.html

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea. (仮テキスト)

これらのベンダーから入手できます

Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi id animi fugiat vero explicabo illo officiis assumenda nulla rerum, dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat in accusantium! (仮テキスト)
コード
<div class="book-presenter">
  <div class="cover">
    <img src="/assets/learning/crystal_programming.png" alt="" aria-label="Book cover" />
  </div>

  <div class="description">
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem
veniam libero! Deleniti nemo quas optio voluptas voluptatibus sint ratione.
Id vel error quia ipsam sit saepe hic at amet excepturi ea.

    </p>

    <p>You can get it from these vendors:</p>
      <div class="link-item">
        <a class="link-item__main" href="https://www.amazon.com/Crystal-Programming-project-based-introduction-applications/dp/1801818673/ref=sr_1_2"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm0 0v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
</svg>

          Buy on Amazon</a>
      </div>
      <div class="link-item">
        <a class="link-item__main" href="https://www.packtpub.com/product/crystal-programming/9781801818674"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h480q33 0 56.5 23.5T800-800v640q0 33-23.5 56.5T720-80H240Zm0-80h480v-640h-80v280l-100-60-100 60v-280H240v640Zm0 0v-640 640Zm200-360 100-60 100 60-100-60-100 60Z"/>
</svg>

          Buy on Packt</a>
      </div>
  </div>

  <div class="details">Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi
id animi fugiat vero explicabo illo officiis assumenda nulla rerum,
dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos
maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat
in accusantium!

  </div>
</div>

ブレッドクラム

インクルードパーシャル: _includes/site/breadcrumbs.html

コード
<strong>Basic</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  <span aria-hidden="true">/</span>

      <div class="breadcrumb"><a href="/community/" rel="up">Community</a>
      </div>
</nav>

<nav class="section-links" aria-label="Section links"><ul>
    <li>
      <a href="/team/" 
        >Team</a>
    </li>
    <li>
      <a href="/sponsors/" 
        >Sponsors</a>
    </li>
    <li>
      <a href="/community/#events" 
        >Events</a>
    </li>
    <li>
      <a href="/used_in_prod/" 
        >Used in production</a>
    </li>
    <li>
      <a href="/community/governance/" 
        >Governance</a>
    </li>
</ul>

</nav>


<strong>Section Main</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  <span aria-hidden="true">/</span>

    <span class="breadcrumb">
      <a href="/community/" aria-current="page">Community</a>
    </span>
</nav>

<nav class="section-links" aria-label="Section links"><ul>
    <li>
      <a href="/team/" 
        >Team</a>
    </li>
    <li>
      <a href="/sponsors/" 
        >Sponsors</a>
    </li>
    <li>
      <a href="/community/#events" 
        >Events</a>
    </li>
    <li>
      <a href="/used_in_prod/" 
        >Used in production</a>
    </li>
    <li>
      <a href="/community/governance/" 
        >Governance</a>
    </li>
</ul>

</nav>


<strong>Non-link Item</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  <span aria-hidden="true">/</span>

      <div class="breadcrumb"><span>Archive</span>
      </div>
</nav>

<nav class="section-links" aria-label="Section links"><ul>
</ul>

</nav>


<strong>No section</strong>

<nav class="breadcrumbs" aria-label="Breadcrumbs"><span class="breadcrumb">
    <a href="/" rel="index up">Home</a>
  </span>

  
</nav>

<nav class="section-links" aria-label="Section links"><ul>
</ul>

</nav>

カード

Crystal
人間とコンピューターのための言語。
バージョン 1.7.3
コード
<div class="card">
  <img src="/assets/icon.svg" alt="">
  <a href="/" class="name">Crystal</a>

  <div>
    A language for humans and computers.
  </div>

  <div>
    Version 1.7.3
  </div>
</div>

カードリスト

インクルードパーシャル: _includes/pages/sponsors/top_sponors.html

コード
<ul class="cards-list">
    <li class="sponsor-card">
      <a href="https://www.84codes.com/" class="name" rel="sponsored nofollow">84codes</a>
      <img src="/assets/sponsors/84.png" alt="Logo of 84codes">
      <span class="last-payment" title="Last payment">€22,000 per month since Apr 1, 2018</span>
      <span class="all-time" title="All-time total">€523,000</span>
    </li>
    <li class="sponsor-card">
      <a href="https://manas.tech/" class="name" rel="sponsored nofollow">Manas.Tech</a>
      <img src="/assets/manas-orange.svg" alt="Logo of Manas.Tech">
      <span class="last-payment" title="Last payment">$5,000 per month since Jun 19, 2009</span>
      <span class="all-time" title="All-time total">$1,335,000</span>
    </li>
</ul>

コピーアクション

このコンポーネントは、要素(主にコードブロック用)にコピーボタンを追加し、要素の内容をクリップボードに書き込みます。

puts "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
  has been the industry's standard dummy text ever since the 1500s, when an unknown printer."
コード
This component adds a copy button to an element (primarily intended for code blocks)
which writes the content of the element to the clipboard.

<div class="enable-copy-action">
{% highlight crystal %}
puts "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum
  has been the industry's standard dummy text ever since the 1500s, when an unknown printer."
{% endhighlight %}
</div>

<script src="/assets/js/copy-action.js"></script>
<script>
document.querySelectorAll(".enable-copy-action pre").forEach(copy_action)
</script>

画像リスト

インクルードパーシャル: _includes/components/image-list.html

Lorem ipsum dolor sit amet consectetur, adipisicing elit (仮テキスト)
Quia quos autem veniam libero! (仮テキスト)
コード
<div class="image-list">
    <div class="item"><div class="hex-icon">
  <div class="inner"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M664-160 440-384v-301L336-581l-57-57 201-201 200 200-57 57-103-103v269l200 200-56 56Zm-368 1-56-56 127-128 57 57-128 127Z"/>
</svg>

  </div>
</div>

      <div class="small">Lorem ipsum dolor sit amet consectetur, adipisicing elit
      </div>
    </div>
    <div class="item"><div class="hex-icon">
  <div class="inner"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z"/>
</svg>

  </div>
</div>

      <div class="small">Quia quos autem veniam libero!
      </div>
    </div>
</div>

一緒に表示されるリンクのセット。添付されたアイコンは、ターゲットURLから自動的に派生します。

コード
<div class="link-actions">
  <a href="https://crystal.dokyumento.jp/api/">API Docs</a>
  <a href="https://github.com/crystal-lang/crystal/releases/tag/1.11.1">Changelog</a>
  <a href="https://github.com/crystal-lang/crystal/tree/1.11.1">Source</a>
  <a href="https://example.com/">Nondescript Link</a>
  <a href="#top"><img src="/assets/install/linux.svg" alt=""> Linux</a>
</div>
コード
<div class="link-items">
  <h3>News</h3>

  <div class="link-item">
    <a class="link-item__main" href="#top">
      {%- include icons/newsletter.svg %}
      Main link
    </a>
  </div>

  <div class="link-item">
    <a class="link-item__main" href="#top">
      {%- include icons/rss.svg %}
      Main Link
    </a> (<a href="#top">aux link</a>)
    <p>Lorem ipsum dolor sit amet.</p>
  </div>

  <div class="link-item">
    <a href="#top">
      {%- include icons/announce.svg %}
      Link without highlight
    </a>
  </div>
</div>

パートナー画像

コード
{% include components/partner-images.html images=page.partner_images2 %}

{% include components/partner-images.html images=page.partner_images3 %}

投稿カード

コード
{% include components/posts-list.html posts=site.categories.success limit=3 %}

投稿ティザー

インクルードパーシャル: _includes/posts/meta.html

コード
<div class="post-teaser"><time class="post-date" pubdate datetime="2021-08-13"
  >13 Aug 2021</time
>

<ul class="avatar-list" aria-hidden="true">
  <li>
    <a title="Johannes Müller">
      <img
        src="/assets/authors/straight-shoota.jpg"
        alt=""
      />
    </a>
  </li>
  <li>
    <a title="Beta Ziliani">
      <img
        src="/assets/authors/beta-ziliani.jpg"
        alt=""
      />
    </a>
  </li>
</ul>
<div class="author-names">
  <span class="author-name" title="straight-shoota">Johannes Müller</span>
  <span class="author-name" title="beta-ziliani">Beta Ziliani</span>
</div>

<div class="taxonomy">
</div>


  <a href="/2021/08/13/install-specific-versions/" class="post-title">Installing specific versions of Crystal's binary packages</a>
  <div class="excerpt">Lorem ipsum dolor sit amet consectatur elit.
</div>
</div>

プロフィールカード

インクルードパーシャル: _includes/components/profile-card.html

Beta Ziliani @beta-ziliani  のプロフィール画像
チームリーダー、運営委員会 Manas.Tech
コード
<div class="profile-card" itemscope itemtype="https://schema.org/Person">
  <strong class="name" itemprop="name">Beta Ziliani</strong>
  <span class="handle">@beta-ziliani</span>
  <img src="/assets/authors/beta-ziliani.jpg" itemprop="image" alt="Photo of Beta Ziliani" alt="Profile picture of " />

  <div class="roles">
    <span class="role" itemprop="jobTitle">Team lead, Steering Council</span>
    <span class="affiliation" itemprop="affiliation">Manas.Tech</span>
  </div>

  <div class="profiles">
    <a href="https://github.com/beta-ziliani" itemprop="url" title="beta-ziliani on GitHub" class="icon" aria-label="GitHub profile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24.13 23.03">
  <path fill="currentColor" d="M12.11 0C5.61-.19.21 4.91 0 11.41c-.2 5.3 3.2 10 8.3 11.6.3.1.7-.1.8-.4v-2.2c-3.3.7-4-1.6-4-1.6-.2-.7-.7-1.3-1.3-1.7-1.1-.7.1-.7.1-.7.8.1 1.4.6 1.8 1.2.7 1.2 2.2 1.6 3.4 1 .1-.6.3-1.2.8-1.6-2.7-.3-5.5-1.3-5.5-5.8 0-1.2.4-2.3 1.2-3.2-.4-1-.3-2.1.1-3.1 0 0 1-.3 3.3 1.2 2-.5 4-.5 6 0 2.3-1.5 3.3-1.2 3.3-1.2.4 1 .5 2.1.1 3.1.8.9 1.2 2 1.2 3.2 0 4.5-2.8 5.5-5.5 5.8.6.6.9 1.4.8 2.2v3.2c0 .3.3.6.6.6h.3c6.2-1.9 9.7-8.5 7.8-14.7-1.49-5.1-6.19-8.5-11.49-8.31Z"/>
</svg>

    </a>
    <a href="https://forum.crystal-lang.org/u/beta-ziliani" itemprop="url" title="beta-ziliani on the Crystal Forum" class="icon" aria-label="Crystal Forum profile"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 40 39.95">
  <path d="M0 30V2.1c0-.47.22-.93.65-1.4S1.53 0 2 0h25.95c.5 0 .97.22 1.4.68.43.45.65.92.65 1.42v17.8c0 .47-.22.93-.65 1.4s-.9.7-1.4.7H8l-8 8Zm10.05 2c-.47 0-.93-.23-1.38-.7-.45-.47-.68-.93-.68-1.4V25h25V8h5c.47 0 .92.23 1.35.7.43.47.65.95.65 1.45v29.8L32.04 32H10.05Z"/>
</svg>

    </a>
  </div>
</div>

サイドセクション

補足 1

本文 1

補足 2 (反転)

本文 2
コード
<section class="side-section">
  <h2>Aside 1</h2>
  <aside class="info">
    <p>The Core Team manages the development of Crystal and its ecosystem.</p>
  </aside>

  <div style="background-color: #ddd; min-width: 35ch;">
    BODY 1
  </div>
</section>

<section class="side-section reversed">
  <h2>Aside 2 (Reversed)</h2>
  <div style="background-color: #ddd; min-width: 35ch;">
    BODY 2
  </div>
  <aside class="info">
    <p>The Core Team manages the development of Crystal and its ecosystem.</p>
  </aside>
</section>

推薦文プロファイル

インクルードパーシャル: _includes/components/testimonial-profile.html

Photo of Peter Schols

Peter Schols、CEO、Diploid

Photo of Isaac Sloan

Isaac Sloan、CIO兼ソフトウェアアーキテクト、Nikola Motor Company

Crystalでの作業が大好きです。初期のRubyにあったような幸福感がたくさんあり、コミュニティは本当に素晴らしいことをしています。

コード
<div class="testimonial-profile">
  <img src="/assets/authors/peterschols.jpg" alt="Photo of Peter Schols">
  <p>Peter Schols, CEO, Diploid</p>
</div>


<div class="testimonial-profile">
  <img src="/assets/authors/elorest.jpg" alt="Photo of Isaac Sloan">
  <p>Isaac Sloan, CIO & Software Architect, Nikola Motor Company</p>
</div>


> I love working with Crystal. It has a lot of the happiness value that Ruby had at the beginning, and the community is doing really amazing things.

トピック

スポンサーシップ

OpenCollectiveを介して3つの簡単な手順でCrystalスポンサーになりましょう

貢献する
エンタープライズサポート

Crystalのスポンサーになることは、あなたのブランドにとって素晴らしい出発点となります

サポートを受ける
あなたのプロジェクトのために私たちを雇う

実装を導くために、言語の作成者そのものの専門知識を活用できます。

私たちを雇う
コード
{% include components/sponsorship.html %}

要素

六角形アイコン

インクルードパーシャル: _includes/elements/hex-icon.html

コード
<div class="hex-icon">
  <div class="inner"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -960 960 960">
  <path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h240l80 80h320q33 0 56.5 23.5T880-640v400q0 33-23.5 56.5T800-160H160Zm0-80h640v-400H447l-80-80H160v480Zm0 0v-480 480Z" />
</svg>

  </div>
</div>

六角形ボタン

コード
<a href="/" class="hex">Get Crystal Now!!!</a>

<a href="/" class="hex bordered">Get Crystal Now!!!</a>

タイポグラフィ

基本

Crystalの構文は、Rubyの構文に大きく影響を受けています。

そのため、読みやすく、簡単に 書くことができ、経験豊富なRuby開発者にとっては学習曲線が緩やかになるという利点もあります: cat [crystal](https://) > /dev/brain.

洗練された構文により、人間がreadしやすくなりますが、マシン上でも高速です。

Crystalフォーラムでは、Crystalに興味のあるhumansと出会うことができます.

プロセスを終了するには、Ctrl+Cを押します。

コード
**Crystal’s** syntax is *heavily* inspired by [Ruby’s](https://ruby-lang.org/).

So it feels natural to read and ***easy*** to write, and has the added benefit of
a lower learning curve for experienced Ruby devs: `cat [crystal](https://) > /dev/brain`.

The **slick** syntax makes it easy to `read` for humans, but it's also [**fast** on machines](/).

On [the *Crystal Forum* you can meet `humans` interested in Crystal](https://forum.crystal-lang.org).

Press <kbd>Ctr+C</kbd> to end the process.

ブロッククオート

ありがとう! Crystalは素晴らしいです!

リリースノートを読むのはいつも楽しいです。素晴らしい仕事ぶりですね!

いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、最も重要または興味深い変更点をリストします。いくつかのバグ修正や小さな機能強化については触れていません。詳細については、変更履歴をご覧ください。

破壊的な変更は⚠️でマークされています。

  • ポイント 1
  • ポイント 2

Multi assign = heaven.

コード
> Thank you! [Crystal](https://crystal.dokyumento.jp) is awesome!

> I am always happy to read the release notes. Awesome work, guys!

> We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements. For more details, visit the [changelog](https://github.com/crystal-lang/crystal/releases/tag/1.3.0).
>
> Breaking changes are marked with ⚠️.
>
> * Point 1
> * Point 2

> `Multi assign = heaven`.

コールアウト: 一般(タイトル付き)

重要なお知らせ

この新しいリリースを使用するには、ソースからシャードをビルドするか、1.0.0-pre1がタグ付けされるまでnightly Crystalリリースを使用する必要があります。

コード
> **NOTE:** Important notice
> To use this new release you will need to build shards from sources or use a nightly Crystal release until 1.0.0-pre1 is tagged.

コールアウト: 一般

注記

一般的なコールアウト この新しいリリースを使用するには、1.0.0-pre1がタグ付けされるまでnightly Crystalリリースからシャードをビルドする必要があります。

ネストされたブロッククオート付き。そうです!


注: 注意 ネストされたコールアウトはありません。

コード
> **NOTE:**
> Generic callout use this new release you will need to build shards from
> nightly Crystal release until 1.0.0-pre1 is tagged.
>
> > With nested blockquote. Ye’a!
>
> ---
>
> > **NOTE:** Attention
> > No nested callout.

コールアウト: タイプ

注記

Lorem ipsum dolor sit amet, consectetur adipiscing elit.(省略)

警告

Lorem ipsum dolor sit amet, consectetur adipiscing elit.(省略)

情報

Lorem ipsum dolor sit amet, consectetur adipiscing elit.(省略)

コード
> **NOTE:**
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
> Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa,
> nec semper lorem quam in massa.

> **WARNING:**
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
> Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa,
> nec semper lorem quam in massa.

> **INFO:**
> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla et euismod nulla.
> Curabitur feugiat, tortor non consequat finibus, justo purus auctor massa,
> nec semper lorem quam in massa.

コードブロック

# A very basic HTTP server
require "http/server"

server = HTTP::Server.new do |context|
  context.response.content_type = "text/plain"
  context.response.print "Hello world, got #{context.request.path}!"
end

puts "Listening on http://127.0.0.1:8080"
server.listen(8080)
name: my-project
version: 0.1
license: MIT

crystal: 1.3.0

dependencies:
  mysql:
    github: crystal-lang/crystal-mysql

Crystalでは、すべての型は非nil可能であり、nil可能な変数は型とnilの共用体として表現されます。

if rand(2) > 0
  my_string = "hello world"
end

puts my_string.upcase
$ crystal build hello-world.cr
$ ./hello-world
Hello World!
class Object
  def has_instance_var?(name) : Bool{{ @type.instance_vars.map &.name.stringify }}.includes? name
  end
end

class Person
  property name : String

  def initialize(@name)
  end
end

person = Person.new "John"
p! person.has_instance_var?("name") # => true
p! person.has_instance_var?("birthday") # => false
コード
```crystal
# A very basic HTTP server
require "http/server"

server = HTTP::Server.new do |context|
  context.response.content_type = "text/plain"
  context.response.print "Hello world, got #{context.request.path}!"
end

puts "Listening on http://127.0.0.1:8080"
server.listen(8080)
```

```yaml
name: my-project
version: 0.1
license: MIT

crystal: 1.3.0

dependencies:
  mysql:
    github: crystal-lang/crystal-mysql
```

All types are non-nilable in Crystal, and nilable variables are represented as a union between the type and nil.

```
if rand(2) > 0
  my_string = "hello world"
end

puts my_string.upcase
```

```terminal
$ crystal build hello-world.cr
$ ./hello-world
Hello World!
```

```crystal
class Object
  def has_instance_var?(name) : Bool
    {{- "{{" }} @type.instance_vars.map &.name.stringify }}.includes? name
  end
end

class Person
  property name : String

  def initialize(@name)
  end
end

person = Person.new "John"
p! person.has_instance_var?("name") # => true
p! person.has_instance_var?("birthday") # => false
```

  tmp = some_exp1
  if tmp
    tmp
  else
    some_exp2
  end
Crystalコード
コード
<figure markdown="1">

  ```crystal
  tmp = some_exp1
  if tmp
    tmp
  else
    some_exp2
  end
  ```

  <figcaption>Crystal code</figcaption>
</figure>

脚注

Lorem ipsum dolor sit amet consectetur adipisicing elit.1 Quod labore suscipit animi2 consequatur.(省略)1 仕事によって引き起こされる精神2の結果。(省略)

Lorem ipsum dolor sit amet consectetur, adipisicing elit.(省略)1(省略)1(省略)

  1. Lorem ipsum dolor, sit amet consectetur adipisicing elit.(省略)  2

  2. Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi. 

コード
Lorem ipsum dolor sit amet consectetur adipisicing elit.[^foo] Quod labore suscipit animi[^bar] consequatur. Accusantium quibusdam dolorum at a, numquam deserunt.

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quia quos autem veniam libero![^foo] Deleniti nemo quas optio voluptas voluptatibus sint ratione. Id vel error quia ipsam sit saepe hic at amet excepturi ea. Voluptas sunt ratione consequatur optio porro eaque nam quod ex illum modi id animi fugiat vero explicabo illo officiis assumenda nulla rerum, dignissimos sed dicta pariatur quis eum. Beatae ea cumque alias ducimus quos maxime sed, modi illum at repellendus, ex deleniti nesciunt tempore placeat in accusantium!

[^foo]: Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet voluptas dicta dolor.
[^bar]: Voluptas sunt ratione consequatur optio [porro eaque](#top) nam quod ex illum modi.

見出し

見出し 1

見出し 2

見出し 3

見出し 4

見出し 5
見出し 6

見出し 1

いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。

見出し 2

いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。

見出し 3

いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。

見出し 4

いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。

見出し 5

いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。

見出し 6
コード
# Headline 1

## Headline 2

### Headline 3

#### Headline 4

##### Headline 5

###### Headline 6

# Headline 1

We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.

## Headline 2

We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.

### Headline 3

We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.

#### Headline 4

We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.

##### Headline 5

We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.

###### Headline 6

インライン要素

code要素 A11Y mark要素 del要素 strikethrough要素 ins要素 u要素 small要素 strong要素 em要素 cite要素 sup 要素 sub 要素
コード
<div style="white-space: pre">
<code>code element</code>
<abbr title="Accessibility">A11Y</abbr>
<mark>mark element</mark>
<del>del element</del>
<s>strikethrough element</s>
<ins>ins element</ins>
<u>u element</u>
<small>small element</small>
<strong>strong element</strong>
<em>em element</em>
<cite>cite element</cite>
sup <sup>element</sup>
sub <sub>element</sub>
</div>

定義リスト

Crystal
いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。
シャード
いくつかのバグ修正と改善を含む新しいリリースを提供しています。以下に、いくつかのバグ修正や小さな機能強化には触れずに、最も重要または興味深い変更点を示します。
コード
<dl>
  <dt>Crystal</dt>
  <dd>We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.</dd>
  <dt>Shards</dt>
  <dd>We are delivering a new release with several bugfixes and improvements. Below we list the most important or interesting changes, without mentioning several bugfixes and smaller enhancements.</dd>
</dl>

順序付きリスト

  1. Cのように高速
  2. Rubyのように洗練された
  3. Crystalは、GoやClojureのように、共有メモリやロックに頼ることなく、ファイバーと呼ばれるグリーンスレッドを使用して並行性を実現します。ファイバーはチャネルを使用して相互に通信します。
  4. Crystalライブラリはシャードとしてパッケージ化され、集中リポジトリを必要とせずにGit経由で配布されます。

    組み込みコマンドを使用すると、YAMLファイルを介して依存関係を簡単に指定し、それぞれのレポジトリから取得できます。

  5. Crystal 1.3.0 (2022-01-06)
    
    LLVM: 13.0.0
    Default target: x86_64-unknown-linux-gnu
    
コード
1. Fast as C
2. Slick as Ruby
3. Crystal uses [green threads](/), called fibers, to achieve concurrency. Fibers communicate with each other using channels, as in Go or Clojure, without   having to turn to shared memory or locks.
4. Crystal libraries are packed as Shards, and distributed via Git without needing a centralised repository.

   Built in commands allow dependencies to be easily specified through a YAML file and fetched from their respective repositories.
5. ```text
   Crystal 1.3.0 (2022-01-06)

   LLVM: 13.0.0
   Default target: x86_64-unknown-linux-gnu
   ```

順序なしリスト

  • Cのように高速
  • Rubyのように洗練された
  • Crystalは、GoやClojureのように、共有メモリやロックに頼ることなく、ファイバーと呼ばれるグリーンスレッドを使用して並行性を実現します。ファイバーはチャネルを使用して相互に通信します。
  • Crystalライブラリはシャードとしてパッケージ化され、集中リポジトリを必要とせずにGit経由で配布されます。

    組み込みコマンドを使用すると、YAMLファイルを介して依存関係を簡単に指定し、それぞれのレポジトリから取得できます。

  • Crystal 1.3.0 (2022-01-06)
    
    LLVM: 13.0.0
    Default target: x86_64-unknown-linux-gnu
    
コード
* Fast as C
* Slick as Ruby
* Crystal uses [green threads](/), called fibers, to achieve concurrency. Fibers communicate with each other using channels, as in Go or Clojure, without   having to turn to shared memory or locks.
* Crystal libraries are packed as Shards, and distributed via Git without needing a centralised repository.

  Built in commands allow dependencies to be easily specified through a YAML file and fetched from their respective repositories.
* ```text
  Crystal 1.3.0 (2022-01-06)

  LLVM: 13.0.0
  Default target: x86_64-unknown-linux-gnu
  ```

水平線

最初の段落。


2番目の段落。

コード
First paragraph.

---

Second paragraph.

演算子 説明 オーバーロード可能 結合性
+ +1 はい
&+ ラッピング正 &+1 はい
- -1 はい
&- ラッピング負 &-1 はい
コード
| Operator | Description | Example | Overloadable | Associativity |
|---|---|---|---|---|
| `+`  | positive | `+1` | [yes](/) | right |
| `&+` | wrapping positive | `&+1` | yes | right |
| `-`  | negative | `-1` | yes | right |
| `&-` | wrapping negative | `&-1` | yes | right |

プロパティテーブル

1.3.2 2022-01-18
1.3.1 2022-01-13
1.3.0 2022-01-06
コード
<table class="properties">
  <tbody>
    <tr>
      <th scope="row">1.3.2</th>
      <td>2022-01-18</td>
    </tr>
    <tr>
      <th scope="row">1.3.1</th>
      <td>2022-01-13</td>
    </tr>
    <tr>
      <th scope="row">1.3.0</th>
      <td>2022-01-06</td>
    </tr>
  </tbody>
</table>