Flutter控制台Markdown渲染插件console_markdown的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter控制台Markdown渲染插件console_markdown的使用

简介

通过使用markdown语法改变控制台的样式。简单易用,无需任何设置。

该插件使用了marked实现Markdown语法解析,并使用chalkdart进行控制台样式设置。

特性

  • 无需设置
  • 支持符号语法的Markdown
  • 支持类似HTML标签的语法
  • 可选严格的Markdown语法以避免错误

开始使用

通过 pub 安装插件:

dart pub add console_markdown

然后在 Dart 文件中导入该包:

import 'package:console_markdown/console_markdown.dart';

使用方法

可以使用 ConsoleMarkdown.apply() 方法将Markdown应用到字符串:

print(ConsoleMarkdown.apply('Hello **World**!'));

也可以使用 string.toConsole() 扩展方法:

print('Hello, **world**!'.toConsole());

print(
  '''
    Hello **World**!
    __Looks *pretty* easy__
    
    <console color="red" background="black" bold> Console Markdown </console>
  '''.toConsole()
);

Markdown 速查表

符号
符号 属性 示例 结果
** 加粗 **text** text
* 斜体 *text* text
__ 下划线 __text__ (无效果)
~~ 删除线 ~~text~~ text
^ 上标 ^text^ ^text^
~ 下标 ~text~ ~text~
___ 双下划线 ___text___ (无效果)
!! 闪烁 !!text!! (无效果)
!!! 快速闪烁 !!!text!!! (无效果)
|| 隐藏 ||text|| (无效果)
^^ 反色 ^^text^^ (无效果)
`` 淡化 text (无效果)
标签
标签 属性 示例
<reset> 重置 <reset>text
<overline> 上划线 <overline>text</overline>
<br> 换行 <br>
<b> 加粗 <b>text</b>
<i> 斜体 <i>text</i>
<u> 下划线 <u>text</u>
<uu> 双下划线 <uu>text</uu>
<s> 删除线 <s>text</s>
<sup> 上标 <sup>text</sup>
<sub> 下标 <sub>text</sub>

注意:所有符号属性名称都可以作为标签使用。

颜色

以下颜色可作为标签使用:

  • black
  • red
  • green
  • yellow
  • blue
  • magenta
  • cyan
  • white
  • gray

使用 background 标志可以设置文本的背景颜色。

动态标签
动态标签 属性 示例 描述
<console> 控制台 <console color="red" background="#000000" bold>text</console> 所有上述属性名称都可以作为标签属性使用。
<rgb(r, g, b)> RGB <rgb(255, 0, 0)>text</rgb> 可以通过添加 background 属性来设置背景颜色。
<hex([#]...)> 十六进制 <hex(#ff0000)>text</hex> 可以通过添加 background 属性来设置背景颜色。
<#...> 短十六进制 <#ff0000>text</#> 可以通过添加 background 属性来设置背景颜色。

Markdown 语法替代方案

如果你对性能有所顾虑,可以使用更简单的Markdown版本,只包含某些占位符。

Markdown 描述
ConsoleMarkdownSymbols 只包含符号
ConsoleMarkdownBasic 只包含控制台标签,可用于设置其他属性
ConsoleMarkdown 包含所有Markdown语法

示例

import 'package:console_markdown/console_markdown.dart';

void main() {
  print(
    '''
      Hello **World**!
      __Looks *pretty* easy__

      <console color="red" background="black" bold> Console Markdown </console>
    '''
    .toConsole()
  );
}

完整示例代码

import 'package:console_markdown/console_markdown.dart';

void main() {
  print(
    '''
      Hello **World**!
      __Looks *pretty* easy__

      <console color="red" background="black" bold> Console Markdown </console>
    '''
    .toConsole()
  );
}

更多关于Flutter控制台Markdown渲染插件console_markdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter控制台Markdown渲染插件console_markdown的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用console_markdown插件来在控制台渲染Markdown的示例代码。

首先,你需要在你的pubspec.yaml文件中添加console_markdown依赖:

dependencies:
  flutter:
    sdk: flutter
  console_markdown: ^0.4.0  # 请检查最新版本号

然后,运行flutter pub get来安装依赖。

接下来是一个完整的Flutter应用示例,展示了如何使用console_markdown插件在控制台中渲染Markdown文本:

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Console Markdown Demo'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: _renderMarkdown,
            child: Text('Render Markdown in Console'),
          ),
        ),
      ),
    );
  }

  void _renderMarkdown() {
    String markdownText = """
    # Flutter Console Markdown Demo

    This is a simple demo of how to use the `console_markdown` package to render Markdown in the console.

    - Item 1
    - Item 2
    - Item 3

    **Bold Text** and *Italic Text*.

    [Link to Flutter](https://flutter.dev)

    ```dart
    void main() {
      print("Hello, Flutter!");
    }
    ```
    """;

    // 使用 console_markdown 包渲染 Markdown 并输出到控制台
    printMarkdown(markdownText);
  }
}

// 自定义的 printMarkdown 函数,用于在控制台中渲染 Markdown
void printMarkdown(String markdown) {
  // 使用 console_markdown 包提供的 MarkdownRenderer 类
  final renderer = MarkdownRenderer();
  final result = renderer.render(markdown);

  // 将渲染后的结果输出到控制台
  print(result);
}

在这个示例中,我们创建了一个简单的Flutter应用,包含一个按钮。当按钮被点击时,会调用_renderMarkdown函数,该函数接收一个Markdown字符串并使用console_markdown包中的MarkdownRenderer类将其渲染为纯文本,然后输出到控制台。

注意:由于Flutter的控制台输出通常是在开发过程中通过命令行工具(如Android Studio、VSCode等)的终端窗口查看的,因此渲染后的Markdown文本会显示在这些工具的终端中。

由于console_markdown包可能并不直接将渲染结果输出到Flutter应用的真实控制台(即设备的日志或调试控制台),因此在实际设备或模拟器上运行时,你可能需要在开发工具的终端窗口中查看输出。

回到顶部