Skip to content

README_JP.md

Latest commit

 

History

History
230 lines (168 loc) · 9.28 KB

README_JP.md

File metadata and controls

230 lines (168 loc) · 9.28 KB

言語：簡体中文 | 英語 | 日本語

画面

📖markdown_widget

カバレッジステータス pubパッケージ デモ

シンプルで使いやすいマークダウンレンダリングコンポーネント。

  • 見出しを通じてTOC（目次）機能をサポートし、迅速な位置決めが可能
  • コードのハイライトをサポート
  • すべてのプラットフォームをサポート

🚀使用方法

始める前に、デモをクリックしてオンラインデモを試すことができます。

import 'package:flutter/material.dart';
import 'package:markdown_widget/markdown_widget.dart';

class MarkdownPage extends StatelessWidget {
  final String data;

  MarkdownPage(this.data);

  @override
  Widget build(BuildContext context) => Scaffold(body: buildMarkdown());

  Widget buildMarkdown() => MarkdownWidget(data: data);
}

独自のColumnや他のリストウィジェットを使用したい場合は、MarkdownGeneratorを使用できます。

  Widget buildMarkdown() =>
      Column(children: MarkdownGenerator().buildWidgets(data));

またはMarkdownBlockを使用します。

  Widget buildMarkdown() =>
      SingleChildScrollView(child: MarkdownBlock(data: data));

📁 その他の例

高度な使用例については、リポジトリの example/lib/markdown_custom フォルダを参照してください：

  • video.dart - カスタムvideoタグのサポート
  • latex.dart - LaTeX数式レンダリング
  • mermaid.dart - Mermaid図のサポート（フローチャート、シーケンス図など）
  • html_support.dart - HTMLタグの拡張
  • custom_node.dart - カスタムノードの実装例

これらの例は、カスタムタグと機能を使用してパッケージを拡張する方法を示しています。

🌠ナイトモード

markdown_widgetはデフォルトでナイトモードをサポートしています。異なるMarkdownConfigを使用するだけで有効にできます。

  Widget buildMarkdown(BuildContext context) {
    final isDark = Theme.of(context).brightness == Brightness.dark;
    final config = isDark
        ? MarkdownConfig.darkConfig
        : MarkdownConfig.defaultConfig;
    final codeWrapper = (child, text, language) =>
        CodeWrapperWidget(child, text, language);
    return MarkdownWidget(
        data: data,
        config: config.copy(configs: [
        isDark
        ? PreConfig.darkConfig.copy(wrapper: codeWrapper)
        : PreConfig().copy(wrapper: codeWrapper)
    ]));
  }
デフォルトモード ナイトモード

🔗リンク

リンクのスタイルとクリックイベントをカスタマイズできます。例えば次のように

  Widget buildMarkdown() => MarkdownWidget(
      data: data,
      config: MarkdownConfig(configs: [
        LinkConfig(
          style: TextStyle(
            color: Colors.red,
            decoration: TextDecoration.underline,
          ),
          onTap: (url) {
            ///TODO:on tap
          },
        )
      ]));

📜TOC（目次）機能

TOCの使用は非常に簡単です。

  final tocController = TocController();

  Widget buildTocWidget() => TocWidget(controller: tocController);

  Widget buildMarkdown() => MarkdownWidget(data: data, tocController: tocController);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Row(
          children: <Widget>[
            Expanded(child: buildTocWidget()),
            Expanded(child: buildMarkdown(), flex: 3)
          ],
        ));
  }

🎈コードのハイライト

コードのハイライトは複数のテーマをサポートしています。

import 'package:flutter_highlight/themes/a11y-light.dart';

  Widget buildMarkdown() => MarkdownWidget(
      data: data,
      config: MarkdownConfig(configs: [
        PreConfig(theme: a11yLightTheme),
      ]));

🧬全選択とコピー

全プラットフォームで全選択とコピー機能をサポートしています。

image

🌐Htmlタグ

現在のパッケージはMarkdownタグの変換のみを実装しているため、デフォルトではHTMLタグの変換をサポートしていません。ただし、この機能は拡張によってサポートできます。詳細については、html_support.dartの使用方法を参照してください。

こちらがオンラインHTMLデモショーケースです。

🧮Latexサポート

例にはLaTeXの簡単なサポートも含まれており、latex.dartの実装を参照することで実装できます。

こちらがオンラインlatexデモショーケースです。

🔷Mermaid図サポート

例にはMermaid図のサポートが含まれており、フローチャート、シーケンス図、状態図などをレンダリングできます。実装についてはmermaid.dartを参照してください。

機能：

  • 複数の図タイプ（フローチャート、シーケンス図、状態図、ER図など）
  • テーマサポート（自動ライト/ダークモード）
  • インタラクティブな表示モード（コードのみ、図のみ、または両方）
  • フルスクリーンビューア（パンとズームをサポート）
  • 幅の広い図の独立した水平スクロール
  • パフォーマンス最適化のためのスマートキャッシュとデバウンス

こちらがオンラインMermaidデモショーケースです。

import 'package:markdown_widget/markdown_widget.dart';
import 'markdown_custom/mermaid.dart';

// 基本的な使い方
final isDark = Theme.of(context).brightness == Brightness.dark;
final preConfig = PreConfig(
  wrapper: createMermaidWrapper(
    config: const MermaidConfig(),
    isDark: isDark,
    preConfig: preConfig,
  ),
);

MarkdownWidget(
  data: markdown,
  config: config.copy(configs: [preConfig]),
)

// カスタム設定
final preConfig = PreConfig(
  wrapper: createMermaidWrapper(
    config: MermaidConfig(
      displayMode: MermaidDisplayMode.codeAndDiagram,
      diagramPadding: EdgeInsets.all(16.0),
      showLoadingIndicator: true,
    ),
    isDark: isDark,
    preConfig: preConfig,
  ),
);

🍑カスタムタグの実装

MarkdownGeneratorConfigにSpanNodeGeneratorWithTagを渡すことで、新しいタグとそのタグに対応するSpanNodeを追加できます。また、既存のタグを使用して対応するSpanNodeを上書きすることもできます。

また、InlineSyntaxとBlockSyntaxを使用してMarkdown文字列の解析ルールをカスタマイズし、新しいタグを生成することもできます。

カスタムタグの実装方法については、このissueを参照してください。

このパッケージを使用していて、良いアイデアや提案がある場合、または問題がある場合は、プルリクエストやissueを開いてください。

🧾付録

markdown_widgetで使用されている他のライブラリは次のとおりです。

パッケージ 説明
markdown マークダウンデータの解析
flutter_highlight コードのハイライト
highlight コードのハイライト
url_launcher リンクのオープン
visibility_detector ウィジェットの可視性のリスニング
scroll_to_index ListViewがインデックスにジャンプできるようにする