介绍
在前端开发中，我们经常需要将 Markdown 文本转换成 HTML 格式来显示。很多时候，我们需要将转换过程组件化，使得使用起来更加方便和便捷。
这时候就可以使用 npm 包 ember-marked。ember-marked 是一个 Markdown 转 HTML 的 Ember.js 组件，可以轻松地将 Markdown 文本转换成 HTML 格式，支持代码高亮、自定义 CSS 样式、快速配置等功能。
本篇文章将详细介绍 npm 包 ember-marked 的使用方法，包括安装、基本使用、高级用法等方面内容。
安装
安装 ember-marked 很简单，只需要在终端中使用以下命令安装即可：
--- ------- ------------ ----------
该命令会自动安装最新版的 ember-marked，并将其添加到项目的 devDependencies 中。
基本用法
ember-marked 可以作为一个组件引入项目中。首先在需要使用的 .hbs 文件中添加组件：
-------------- ---------
其中 content 为需要转换的 Markdown 文本字符串。
如果需要自定义 CSS 样式，可以在样式表中添加以下代码：
-- - ---------- ----- ------ -------- ------------ ----- - -- - ---------- ----- ------ -------- ------------ ----- - - - ---------- ----- ------ -------- ------------ ---- -
以上样式为示例，可以根据实际需求进行自定义。
高级用法
代码高亮
默认情况下，ember-marked 不会对代码进行高亮。如果需要高亮代码，可以使用 highlight.js 库来实现。
首先，在终端中使用以下命令安装 highlight.js 库：
--- ------- ------------ ----------
然后在 app.js 中引入 highlight.js 和 ember-marked，在 application 组件中添加以下代码：
------ ---- ---- ---------------
------ ----------- ---- ---------------
--------------------
---------- -------------- ----- -
------ ------------------------ --------------
-
---
------ ------- --------------------------
---
---在样式表中添加以下代码：
--- ---- - -------- ------ -------- ------ ---------- ----- ------ -------- ----------------- -------- -------------- ---- -
然后在需要高亮的代码块中添加代码语言的 class，例如：
------------- ------------------ --------
--- ---- ------------ ------------------------------- --------------- ------------------ ------
var app = new EmberApp(defaults, { emberMarked: { highlightEnabled: true, highlightTheme: 'github', headingClassName: 'my-heading', paragraphClassName: 'my-para', linkRel: 'nofollow', linkTarget: '_blank' } });
---------------------- ------------------------- -------------------------- -------- ------------------------ -------- ------------- ----- --- ------------- ----- ------ --- -- ---- --- ----
{{ember-marked "# Ember Marked\n\nA Markdown to HTML converter for Ember.js."}}
--- ----
{{ember-marked "
javascript function myFunction() { document.getElementById('demo').innerHTML = 'Hello World'; }
------- --------- ---------- ------- -- - ------------- --- ---------------------------------
"}}
-- -- ----------------- --- - ------------ -- -------- ----- ---- ------------------- --- ----- ------------ ------------------------------------ ------------ ------- ------------------------------------------------------------------------------ ---------- -----------------------------------------------------------------------------------------------------------------------------