Flutter控制台Markdown渲染插件console_markdown的使用
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 |
(无效果) |
标签
标签 | 属性 | 示例 |
---|---|---|
<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
更多关于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应用的真实控制台(即设备的日志或调试控制台),因此在实际设备或模拟器上运行时,你可能需要在开发工具的终端窗口中查看输出。