如何在 Angular 6 的动态加载代码块上使用 SyntaxHighlighter？

Question

我正在尝试将 SyntaxHighlighter 添加到我的 angular 博客项目中。我的文章有 <pre> 格式的代码片段，并且是从数据库加载的。这篇文章 HTML 然后显示在 ArticleComponent 模板中。当特定路由被触发时，这个 ArticleComponent 本身被加载。 但是当我浏览到这条路线并加载一篇文章时，<pre> 格式的代码根本没有突出显示。但是，如果我刷新页面，突出显示效果很好。不确定我哪里出错了。

index.html

<head>
    <meta charset="utf-8">
    <title>My Blog</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">

    <link rel="stylesheet" href="./assets/css/foundation.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
    <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <app-root></app-root>

    <script type="text/javascript" src="./assets/js/jquery.js"></script>
    <script type="text/javascript" src="./assets/js/what-input.js"></script>
    <script type="text/javascript" src="./assets/js/foundation.js"></script>
    <script>
        $(document).foundation();
    </script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" type="text/javascript"></script>
    <script src="http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" type="text/javascript" ></script>
    <script type="text/javascript">
        SyntaxHighlighter.defaults['toolbar'] = false;
        SyntaxHighlighter.all()
   </script>
</body>

article.component.html

<div class="cell">
    <span [innerHTML]="article"></span>
</div>

article.component.ts

export class ArticleComponent implements OnInit {

    public article = '';
    public title = '';

    constructor(private _route: ActivatedRoute, private _articleService: ArticleService) {
    }

    ngOnInit() {
        const articleId: string = this._route.snapshot.paramMap.get('id');

        const allArticles = this._articleService.getArticles();
        const selectedArticleMetaData = allArticles.find(x => x.id === parseInt(articleId, 10));
        this.title = selectedArticleMetaData.title;

        this._articleService
            .getArticleHtml(selectedArticleMetaData.id)
            .subscribe((article: string) => {
                this.article = article;
            });
    }

}

我检查了 HTML DOM 元素，我能够验证在没有刷新的情况下加载的文章是否将其所有 <pre> 块作为原始代码。但是当 SyntaxHighlighter 在刷新的情况下实际工作时，这些 <pre> 标签都被转换为具有适当样式的 div 元素类.

看起来当通过绑定加载文章时，SyntaxHighlighter 无法处理 <pre> 标签。知道如何解决这个问题吗？还知道为什么当我刷新此页面时它会起作用吗？无论哪种情况，文章都是通过绑定加载的。

Answer 1

使用 <pre> 标记突出显示所有 html 的 SyntaxHighlighter.all() 方法仅调用一次，即在加载页面时调用，因为您将其包含在 [=29 的脚本标记中=].当调用此方法时，它将突出显示页面上所有可用的<pre>。

当您前往路线时，需要调用 SyntaxHighlighter.all() 函数，该函数将突出显示新生成的标签或该标签内的文本。

当您刷新页面时，<pre> 标签在页面上可用 html 当调用 SyntaxHighlighter.all() 时，它会正确突出显示。

因此对于通过绑定加载的文章，在逻辑中调用 SyntaxHighlighter.all() 一次以突出显示您的 <pre> 标签。

您需要选择正确的事件，它应该在您的组件中调用，而且，您需要在组件顶部的导入语句下方定义一个变量，以便 tslint 允许您在您的组件，即 declare var SyntaxHighlighter

Answer 2

解决了。在这里回答它，因为它可能对其他人有帮助。

SyntaxHighlighter.all() 方法将 Highlight 方法注册到 windows.load 事件。因此，此方法仅在页面加载时触发，绝不会稍后触发。这解决了为什么突出显示在页面刷新期间起作用而不是在 angular 路由被触发时起作用的谜团。

解决方法是在 DOM 中加载文章后触发 window.load 事件。有更好的方法可以做到这一点，但这是最直接的方法。更新 article.component.ts 以包含触发 window.load 事件的代码。

this._articleService
    .getArticleHtml(selectedArticleMetaData.id)
    .subscribe((article: string) => {
        this.article = article;
        this.loading = false;

        // trigger window.load event after 500 ms of binding the article property
        setTimeout(() => {
            window.dispatchEvent(new Event('load'));
        }, 500);
    });

如何在 Angular 6 的动态加载代码块上使用 SyntaxHighlighter？

How to use SyntaxHighlighter on dynamically loaded code blocks with Angular 6?

javascript

syntaxhighlighter

angular