@osaxyz/taxonom-style

Taxonomパーサー用のデフォルトスタイルパッケージ（data-taxonom属性専用）

特徴

• データ属性のみサポート: data-taxonom-* 属性に特化した設計
• ヘッドレス対応: 既存のHTMLタグスタイルと競合しない
• カスタマイズ可能: CSS変数による柔軟なテーマ変更
• 軽量: データ属性のみに絞った最小限のCSS

インストール

npm install @osaxyz/taxonom-style

使用方法

Vue.js プロジェクトでの使用

1. main.js/main.ts でインポート（推奨）

// src/main.js または src/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import '@osaxyz/taxonom-style'  // スタイルをインポート

createApp(App).mount('#app')

2. コンポーネント内でインポート

<template>
  <div v-html="parsedMarkdown"></div>
</template>

<script setup>
import { Taxonom } from '@osaxyz/taxonom'
import '@osaxyz/taxonom-style'  // このコンポーネントで使用

const parsedMarkdown = Taxonom.parse('# 見出し\n段落テキスト')
</script>

Nuxt.js プロジェクトでの使用

1. nuxt.config.js/ts での設定（推奨）

// nuxt.config.js または nuxt.config.ts
export default defineNuxtConfig({
  css: [
    '@osaxyz/taxonom-style'  // グローバルにスタイルを適用
  ]
})

2. plugins/ ディレクトリでの設定

// plugins/taxonom-style.client.js
import '@osaxyz/taxonom-style'

3. コンポーネント内での使用

<template>
  <div v-html="parsedContent"></div>
</template>

<script setup>
import { Taxonom } from '@osaxyz/taxonom'

const parsedContent = Taxonom.parse(props.markdown)
</script>

その他の環境

HTML直接読み込み

<link rel="stylesheet" href="node_modules/@osaxyz/taxonom-style/dist/index.css">

CSS ファイル内

@import '@osaxyz/taxonom-style';

対応するdata-taxonom属性

| 属性 | 説明 | |------|------| | [data-taxonom-h1] ~ [data-taxonom-h6] | 見出し（H1〜H6） | | [data-taxonom-p] | 段落 | | [data-taxonom-bold] | 太字 | | [data-taxonom-italic] | 斜体 | | [data-taxonom-code] | インラインコード | | [data-taxonom-codeblock] | コードブロック | | [data-taxonom-hr] | 水平線 | | [data-taxonom-ul] | 順序なしリスト | | [data-taxonom-ol] | 順序付きリスト | | [data-taxonom-li] | リストアイテム | | [data-taxonom-link] | リンク | | [data-taxonom-img] | 画像 | | [data-taxonom-blockquote] | ブロッククォート |

使用例

<!-- Taxonomパーサーが生成するHTML -->
<h2 data-taxonom-h1>メイン見出し</h2>
<p data-taxonom-p>これは段落テキストです。</p>
<strong data-taxonom-bold>太字テキスト</strong>
<em data-taxonom-italic>斜体テキスト</em>
<code data-taxonom-code>インラインコード</code>
<ul data-taxonom-ul>
  <li data-taxonom-li>リストアイテム1</li>
  <li data-taxonom-li>リストアイテム2</li>
</ul>

カスタマイズ

CSS変数を使用してカラーテーマをカスタマイズできます：

:root {
  /* プライマリカラー */
  --color-primary: #your-primary-color;
  --color-primary-50: #your-primary-light;
  --color-primary-600: #your-primary-dark;
  
  /* グレーカラー */
  --color-gray-50: #your-gray-light;
  --color-gray-100: #your-gray-100;
  --color-gray-300: #your-gray-300;
  --color-gray-700: #your-gray-700;
  --color-gray-800: #your-gray-800;
  --color-gray-900: #your-gray-dark;
}

デザイン思想

このパッケージはデータ属性のみに特化することで：

• 🎯 競合回避: 既存サイトのHTMLタグスタイルと競合しない
• 🔧 柔軟性: 既存のCSSフレームワークと共存可能
• 🎨 制御性: Taxonom生成コンテンツのみをスタイリング
• 📦 軽量性: 必要最小限のCSSで高性能

Taxonomパーサーとの連携

@osaxyz/taxonom パーサーと組み合わせて使用します。

Vue.js での実装例

<template>
  <div class="markdown-content">
    <div v-html="parsedMarkdown"></div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { Taxonom } from '@osaxyz/taxonom'

const markdown = ref(`
# メイン見出し

これは**太字**で*斜体*のテキストです。

## リスト例
- アイテム1
- アイテム2

> これはブロッククォートです。
`)

const parsedMarkdown = computed(() => {
  return Taxonom.parse(markdown.value)
})
</script>

Nuxt.js での実装例

<template>
  <article class="post-content">
    <div v-html="content"></div>
  </article>
</template>

<script setup>
import { Taxonom } from '@osaxyz/taxonom'

const props = defineProps({
  markdown: {
    type: String,
    required: true
  }
})

const content = computed(() => {
  return Taxonom.parse(props.markdown)
})
</script>

生成されるHTML例

上記のマークダウンが以下のHTMLに変換されます：

<h2 data-taxonom-h1>メイン見出し</h2>
<p data-taxonom-p>これは<strong data-taxonom-bold>太字</strong>で<em data-taxonom-italic>斜体</em>のテキストです。</p>
<h3 data-taxonom-h2>リスト例</h3>
<ul data-taxonom-ul>
  <li data-taxonom-li>アイテム1</li>
  <li data-taxonom-li>アイテム2</li>
</ul>
<blockquote data-taxonom-blockquote>これはブロッククォートです。</blockquote>

ライセンス

MIT License - 詳細は LICENSE ファイルを参照