angular 中引入 markdown
<p>ngx-markdown 是 <code>Angular2+</code> 的一个第三方库，它的主要功能是将md文件转换为HTML格式，并且支持语法高亮。</p><p>GITHUB地址：https://github.com/jfcere/ngx-markdown</p>
<h2>安装</h2>
<h3>1. 安装 <code>ngx-markdown</code></h3>
<p>使用 <code>npm</code> 进行安装，在 `angular｀项目目录中执行：</p>
<div class="cnblogs_code">
<pre>npm install ngx-markdown --save</pre>
</div>
<p> </p>
<p> 在应用中引入 marked 的支持.引入:</p>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">scripts" : [</span>
<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">../node_modules/marked/lib/marked.js"//增加此句</span>
]</pre>
</div>
<p> </p>
<h3> 2. 安装语法高亮</h3>
<div class="cnblogs_code">
<pre>npm install prismjs --save</pre>
</div>
<p> </p>
<p> 为了使 <code>prism.js</code> 语法高亮可以正常执行,需要引入以下文件 :</p>
<div>
<div>
<ul>
<li>prism.js 的关键库文件, <code>node_modules/prismjs/prism.js</code></li>
<li>一个高亮主题, <code>node_modules/prismjs/themes</code></li>
<li>代码语言描述文件, <code>node_modules/prismjs/components</code> 文件</li>
</ul>
</div>
如果你使用的是 <code>Angular Cli</code> 构建工具,可以将下列语句添加到<code>.angular-cli.json</code>文件中:</div>
<div>
<div class="cnblogs_code">
<pre><span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">styles": [</span>
<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">styles.css",</span>
+ <span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">../node_modules/prismjs/themes/prism-okaidia.css"</span>
<span style="color: rgba(0, 0, 0, 1)">],
</span><span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">scripts": [</span>
+ <span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">../node_modules/prismjs/prism.js",</span>
+ <span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">../node_modules/prismjs/components/prism-csharp.min.js", # c-sharp language syntax</span>
+ <span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">../node_modules/prismjs/components/prism-css.min.js" # css language syntax</span>
]</pre>
</div>
<h2> 组件</h2>
</div>
<h3> 有三种方式来将markdown文件渲染为HTML。</h3>
<p>分别是:</p>
<div class="cnblogs_code">
<pre><!-- static markdown -->
<markdown><span style="color: rgba(0, 0, 0, 1)">
# Markdown
</span></markdown>
<!-- loaded from remote url -->
<markdown =<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">'path/to/file.md'" (error)="onError($event)"></markdown></span>
<!-- variable binding -->
<markdown =<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">markdown"></markdown></span></pre>
</div>
<p> </p>
<p> 第三种, 是使用的Angular中的数据绑定。</p>
<h3>指令组件(Directive)</h3>
<div class="cnblogs_code">
<pre><!-- static markdown -->
<div markdown><span style="color: rgba(0, 0, 0, 1)">
# Markdown
</span></div>
<!-- loaded from remote url -->
<div markdown =<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">'path/to/file.md'" (error)="onError($event)"></div></span>
<!-- variable binding -->
<div markdown =<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">markdown"></div></span> </pre>
</div>
<h3>管道(Pipe)</h3>
<div class="cnblogs_code">
<pre><!-- chain `language` pipe with `markdown` pipe to convert typescriptMarkdown variable content -->
<div =<span style="color: rgba(128, 128, 128, 1)">"</span><span style="color: rgba(128, 128, 128, 1)">typescriptMarkdown | language : 'typescript' | markdown"></div></span></pre>
</div>
<h3>服务(Service)</h3>
<div class="cnblogs_code">
<pre>import { Component, OnInit } from <span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 128, 0, 1)">@angular/core</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
import { MarkdownService } from </span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 128, 0, 1)">ngx-markdown</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">;
@Component({ ... })
export </span><span style="color: rgba(0, 0, 255, 1)">class</span><span style="color: rgba(0, 0, 0, 1)"> ExampleComponent implements OnInit() {
constructor(private markdownService: MarkdownService) { }
ngOnInit() {
</span>// outputs: <p>I am using <strong>markdown</strong>.</p><span style="color: rgba(0, 0, 0, 1)">
console.log(this.markdownService.compile(</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 128, 0, 1)">I am using __markdown__.</span><span style="color: rgba(128, 0, 0, 1)">'</span><span style="color: rgba(0, 0, 0, 1)">));
}
}</span></pre>
</div>
<p> </p>
</div>
<div id="MySignature" role="contentinfo">
【版权声明】本博文著作权归作者所有，任何形式的转载都请联系作者获取授权并注明出处！<br>
【重要说明】本博文为个人学习记录，观点仅为个人见解，不代表技术领域的最终结论。撰写目的主要在于自我总结与经验分享，欢迎批评指正，本人将虚心改进。内容仅供参考，非专业建议，请理性判断。<br>
【博客园地址】叫我+V ： http://www.cnblogs.com/wjw1014<br>
【CSDN地址】叫我+V ： https://wjw1014.blog.csdn.net/<br>
【Gitee地址】叫我+V ：https://gitee.com/wjw1014<br><br><br>
来源：https://www.cnblogs.com/wjw1014/p/11265129.html
頁:
[1]