在Avalonia UI里使用Markdown渲染,可用于一般文章展示,比如AI响应的内容就是Markdown格式,我们可以使用Markdown.Avalonia或Markdown.AIRender,本文介绍使用后者,前者可以点击链接了解用法。
インストールする。
使用 Markdown.AIRender 可以方便地在 Avalonia UI 中实现 Markdown 的渲染功能。通过 NuGet 包管理器,可以轻松地将 Markdown.AIRender 引入到你的项目中。
Install-Package MarkdownAIRender
このインストールコマンドは、必要な依存関係を自動的にダウンロードしてインストールし、その後の開発作業の基礎を築きます。
スタイル内でスタイルを参照する
在 Avalonia 的 Application 样式中引入 Markdown.AIRender 的样式文件是确保其正常工作的重要步骤。以下是具体的代码示例:
<Application
...>
<Application.Styles>
<StyleInclude Source="avares://MarkdownAIRender/Index.axaml" />
</Application.Styles>
</Application>
这样做可以将 Markdown.AIRender 的样式整合到你的应用程序中,使其与应用的整体风格保持一致。它会将 Markdown.AIRender 的默认样式应用到相关的元素上,为后续的 Markdown 渲染提供样式支持。
例:サンプル
まず、Markdownコンテンツを作成する必要があります。ローカルファイルから読み込むことも、ネットワークから取得することもできます。Markdownコンテンツの例を示します。
## 更新日志
### V0.0.1.1(2024-12-28)
- 🔨使用MarkdownAIRender渲染Markdown
### V0.0.1.0(2024-12-25)
- 😄添加更新日志
- 🔨导出Excel默认覆盖已有文件
- 🐛修复只能导出渲染表格数据的问题
これは典型的なMarkdownコンテンツで、いくつかの絵文字とタイトル、リスト、バージョン情報などの一般的なMarkdown構文を使用した更新ログ情報が含まれています。
接下来,在 axaml 中使用 MarkdownRender 元素将 Markdown 内容进行渲染:
xmlns:md="https://github.com/AIDotNet/Markdown.AIRender"
<md:MarkdownRender Value="{Binding Markdown}" />
这里的 Value 属性通过数据绑定将 Markdown 内容传递给 MarkdownRender 元素,它会根据所提供的 Markdown 内容进行渲染,并将其显示在界面上。这种绑定方式可以让你更灵活地更新 Markdown 内容,例如,当 Markdown 属性发生变化时,渲染的内容也会随之更新。
レンダリング効果[れんだりんぐえふぇくと]
上記の設定により、以下のような美しいMarkdownレンダリング効果を得ることができます。

这个渲染效果展示了 Markdown.AIRender 的基本能力,将 Markdown 内容转换为可视化的 UI 元素,为用户提供了清晰、易读的信息展示。
もっと多くの
*** 白黒テーマ **
除了基本的渲染功能,Markdown.AIRender 还支持黑白主题,这为不同的用户需求和设计风格提供了更多的选择。

このGIFは、白黒のテーマでの切り替えを示しており、ユーザーの視覚的好みに合わせて、アプリケーションのインターフェースがテーマごとにどのように変化するかを視覚的に確認できます。
** Markdownテーマカラーをサポート **
参考在线markdown编辑器编写,目前不全,正在完善:

テーマカラーのサポートにより、アプリケーションの全体的なトーンとスタイルに合わせてMarkdownのレンダリングをさらにカスタマイズできます。テーマの色を調整することで、Markdownコンテンツをアプリ全体のデザイン言語に統合し、より協調的でパーソナライズされたユーザーエクスペリエンスを提供できます。
*** 国際化**
在多语言应用开发中,国际化是一个重要的考虑因素。Markdown.AIRender 正在完善对 Markdown 中编程语言【复制】按钮等元素的国际化支持。这将使你的应用程序更具全球化的能力,无论用户来自哪个国家或地区,都能更好地使用你的应用。
在实现国际化的过程中,我们不仅要考虑界面元素的翻译,还需要考虑功能元素的国际化,例如复制按钮的文本、提示信息等。对于 Markdown.AIRender,虽然目前还在完善这方面的功能,但未来它将为你的 Markdown 内容的国际化提供更好的支持。这将有助于你在不同语言环境下提供一致的用户体验,扩大应用程序的用户范围。
倉庫の住所
你可以在 https://github.com/AIDotNet/Markdown.AIRender 找到 Markdown.AIRender 的完整代码和更多信息。在这里,你可以查看最新的更新、提出问题或贡献代码,共同推动该项目的发展。
また、開発中にさまざまな問題に遭遇する可能性があります。以下は、いくつかの考えと提案です。
問題解決とよくある質問
- 性能问题:如果在渲染较长的 Markdown 内容时遇到性能问题,你可以考虑对 Markdown 内容进行分段加载和渲染,或者优化
Markdown.AIRender的渲染算法。可以尝试使用异步加载的方式,避免阻塞 UI 线程,确保用户界面的流畅性。 - 样式问题:如果你对渲染后的样式不满意,可以修改
Index.axaml文件中的样式,或者覆盖相应的样式规则,使其更符合你的需求。你可以通过 Avalonia 的样式机制添加或修改样式属性,如字体大小、颜色、间距等。 - 兼容性问题:确保你的 Avalonia 版本与
Markdown.AIRender兼容。如果遇到兼容性问题,可以查看Markdown.AIRender的 GitHub 仓库中的 Issue 页面,看看是否有其他开发者遇到了类似的问题,并尝试使用最新版本的库或更新 Avalonia 版本来解决问题。
总之,Markdown.AIRender 是一个非常有潜力的库,为 Avalonia UI 中的 Markdown 渲染提供了丰富的功能和良好的扩展性。随着开发的推进,我们可以期待它带来更多强大的功能和更好的用户体验。
将来の展望
在未来,我们希望看到 Markdown.AIRender 不断完善和扩展其功能,例如:
- より多くのテーマの選択とカスタマイズ機能により、ユニークなMarkdownレンダリングを簡単に作成できます。
- ボタンなどの要素の国際化だけでなく、Markdownコンテンツ全体のコードブロックや参照などの要素の多言語処理を含む、国際化サポートをさらに改善します。
- パフォーマンスの向上により、大規模なMarkdownドキュメントのレンダリングがより迅速かつ効率的になります。
通过不断的优化和改进,Markdown.AIRender 为开发者和用户带来更多的便利和更好的体验。
希望本文能够帮助你更好地使用 Markdown.AIRender 进行 Avalonia UI 的开发,如果你有任何问题或建议,欢迎在评论区留言或在 GitHub 上与我们交流。