Question

我正在使用ember-remarkable，因为我想在我的项目中添加markdown解析和语法突出显示。它唯一缺少的是行号，我想通过使用此库添加：highlightjs-line-numbers.js

我使用以下内容覆盖ember-remarkable＆＃39} md-text组件：

import MDTextComponent from 'ember-remarkable/components/md-text';

export default MDTextComponent.extend({
  tagName: null,

  didRender() {
    this._super(...arguments);

    this.$("code[class*='language-']").each((i, block) => {
      this.$(block).addClass('hljs');
      hljs.lineNumbersBlock(block);
    });
  }
});

一切正常！但是，我的编辑抱怨hljs未定义，即使它在页面上可用。

如何避免此错误？

Answer 1

如果没有其他原因，您应该明确地导入您的依赖项，而不是与未来的读者进行沟通。 import hljs from 'highlightjs-line-numbers'

Answer 2

如果是ES6模块，只需导入即可。否则，您可以将其用作window.hljs。

在浏览器中运行js代码时，window是全局变量的根。因此，您可以window.hljs访问它。

如果您在Fastboot中运行代码，这应该是访问全局对象的更好方法：(window || Fastboot || global).hljs。

另一方面，您可以阻止linter提供此错误，而不是使用全局对象容器。对于eslint，请参阅此配置：Specifying Globals。

从ember组件引用全局库

2 个答案: