Markdownレンダラーテスト記事

マークダウンのパースがどうされるのかを確認するためのページです。

異常がないかを確かめるデバッグ用にも使用します。

見出し機能

## 見出し2
### 見出し3
#### 見出し4

テキストリンク

[アンカーテキスト](/)

アンカーテキスト

リスト

- Hello
- Hola
  - Bonjour
  - Hi

• Hello
• Hola
  • Bonjour
  • Hi

インラインスタイル

*イタリック*
**太字**
~~打ち消し線~~
`code`

イタリック 太字 打ち消し線 code

Vue Custom Components

~/components/content ディレクトリにあるコンポーネントはマークダウンで使用できるので、サンプルを表示する。

AlertNote

LinkCard

::LinkCard{link='https://nuxt.com/'}
::

コードブロック

diff

- const posts = await this.$content('/blog', { deep: true }).only(['title']).fetch()
+ const { data: posts } = await useAsyncData('posts-list', () => queryCollection('blogs').only(['title']).find())

bash

cd path/to/app/repository
git tag -a ${tag} -m "参照するアプリとそのバージョン" head
git push origin ${tag}

dockerfile

FROM ruby:3.2-slim-bookworm

WORKDIR /app

CMD ["/bin/bash"]

dotenv

DEV_OAUTH_CLIENT_ID='1'
DEV_OAUTH_CLIENT_SECRET='dfas'

yaml

name: Publish Release

on:
  push:
    tags:
      - "v*"

jobs:
  publish_release:
    timeout-minutes: 5
    runs-on: ubuntu-latest
    permissions:
      contents: write
      pull-requests: read
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 4

html

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

scss

.hogehoge {
  font-size: 16px;
  font-weight: bold;

  .fugafuga {
    background-color: blue;
  }
}

JavaScript

export default {
  name: "hogehoge",
  methods: {
    echoPiyo() {
      return "hogehoge";
    },
  },
};

TypeScript

export const hogehoge: string = "hogehoge";

export const sum = (a: number, b: number): number => {
  return a + b;
};

vue

<template>
  <p>script setup is great</p>
</template>

<script setup lang="ts">
import { fugafuga } from "imports";

export const fugafuga = ref("fugafuga");
</script>

<style scoped>
.tokaionair {
  display: flex;
}
</style>

csv

first,second
1,2

json

{
  "hoge": "hogehge",
  "fuga": "fugafuga"
}

xml

<manifest
    xmlns:android="http://schemas.android.com/apk/res/android"
    package="jp.moduleApps"
>
    <uses-permission android:name="android.permission.INTERNET"/>

    <application
        android:label="@string/app_title"
        android:fullBackupContent="false">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTask"
            android:theme="@style/LaunchTheme"
        >
            <intent-filter>
                <action android:name="android.intent.action.VIEW" />
                <category android:name="android.intent.category.DEFAULT" />
                <data android:scheme="@string/scheme" />
            </intent-filter>
        </activity>
    </application>
</manifest>

表組み

引用

これは引用ブロックです。

複数行にわたって引用できます。

画像

以上でMarkdownレンダラーのテストは完了です。