prismjs在angular+webpack项目中应用

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/a1390033590/article/details/86593898

这个也是代码高亮的问题。请教了别人，直接写成指令的方式运用。

directives/prism.js

import angular from 'angular';
import 'prismjs/themes/prism-solarizedlight.css';

const Prism = require('prismjs');
require('prismjs/components/prism-java.js');

export default angular.module('directives.prism', [])
  .directive('prism', [function prism() {
    return {
      restrict: 'A',
      link: ($scope, element) => {
        element.ready(() => {
          Prism.highlightElement(element[0], false);
        });
      },
    };
  }]).name;

引用js

import angular from 'angular';
import prism from 'directives/prism';
import uibModal from 'angular-ui-bootstrap/src/modal';
import uibCollapse from 'angular-ui-bootstrap/src/collapse';
import $ from 'jquery';

import './style.less';
import template from './template.html';
import detailModalTemplate from './detailModal.html';

class detailModalCtrl {
  constructor($timeout, bug, api, $stateParams, $uibModalInstance, type) {
    'ngInject';
    let appId = $stateParams.appId;
    appId = appId.length ? parseInt(appId, 10) : undefined;
    const shareId = $stateParams.shareId;
    this.bug = bug;
    this.type = type;
    $timeout(() => {
      $('.modal').addClass('fix-height');
    });
    this.isRiskCollapsed = false;
    this.isDescCollapsed = this.type === 'android';
    const showRiskDetail = () => {
      if (this.type === 'android') {
        this.bug.isOpen = !this.bug.isOpen;
        if (this.bug.isOpen && this.bug.list === undefined) {
          api.doppler
            .getSecDetail({
              app_scan_id: appId,
              token: shareId,
              category_id: this.bug.category_id,
              level: this.bug.risk_level,
            })
            .$promise.then(data => {
              this.bug.list = data.list;
            });
        }
      }
    };
    showRiskDetail();
    this.cancel = () => {
      $uibModalInstance.dismiss('cancel');
    };
    this.openDetail = (list) => {
      list.isOpen = !list.isOpen;
      if (list.isOpen) {
        this.getCodefragment(list);
      }
    };
    this.getCodefragment = (list) => {
      api.doppler
        .getCodefragment({
          app_scan_id: shareId ? undefined : appId,
          result_id: list.result_id,
          token: shareId,
        })
        .$promise.then(data => {
          console.log(data.data);
          if (data.data && data.data.apply_reason) {
            list.status = data.data.status;
            list.apply_reason = data.data.apply_reason;
          }
          // this.applyReasonList = data.data;
        });
    };
    this.applyIgnore = (list) => {
      api.doppler
        .applyIgnore({
          result_id: list.result_id,
          apply_reason: list.apply_reason,
        })
        .$promise.then((data) => {
          console.log(data);
          this.getCodefragment(list);
        });
    };
  }
}

class tabContentController {
  constructor(api, $document, $stateParams, $uibModal) {
    'ngInject';
    this.truncate = data => {
      const temp = `<div>${data}</div>`;
      return $(temp).text();
    };

    this.countNum = () => {
      let highNum = 0;
      let midNum = 0;
      let lowNum = 0;
      const tempData = this.data || [];
      tempData.forEach(element => {
        const level = element.risk_level;
        const num = parseInt(element.appear_num, 10);
        if (level === 3) {
          highNum += num;
        } else if (level === 2) {
          midNum += num;
        } else if (level === 1) {
          lowNum += num;
        }
      });
      return { highNum, midNum, lowNum };
    };

    this.showMore = data => {
      $uibModal.open({
        template: detailModalTemplate,
        controller: detailModalCtrl,
        controllerAs: 'vm',
        keyboard: false,
        size: 'lg',
        resolve: {
          bug: () => data,
          type: () => this.type,
        },
      });
    };
  }
}

export default angular
  .module('components.detectTabContent', [prism, uibModal, uibCollapse])
  .component('detectTabContent', {
    bindings: {
      data: '=',
      type: '@',
    },
    template,
    controllerAs: 'vm',
    controller: tabContentController,
  }).name;

html中用法

<pre>
 <code class="language-java" ng-bind="list.code_fragment" prism>
 </code>
</pre>

这样的话，正常情况就可以用了，然而，我又遇到了一个问题，页面显示的数据是在ajax请求之后更新的，这样就会有问题，不会高亮显示了，打断点发现，先执行了Prism.highlightElement(element[0], false)这句，数据才更新，解决方案：

import angular from 'angular';
import 'prismjs/themes/prism-solarizedlight.css';

const Prism = require('prismjs');
require('prismjs/components/prism-json.js');

export default angular.module('directives.prism', [])
  .directive('prism', [function prism() {
    return {
      restrict: 'A',
// 引进scope，绑定code（具体见angular用法）
      scope: {
        code: '=',
      },
      link: ($scope, element) => {
// 监听 code变化，有值以后再去调用Prism.highlightElement(element[0], false);
        $scope.$watch('code', (val) => {
          if (val) {
            Prism.highlightElement(element[0], false);
          }
        });
      },
    };
  }]).name;

html

<pre style="width: 97%; height: 274px; border: 1px solid #a9a9a9; overflow: auto;margin:0;"
                     class="language-json" ng-bind="vm.result" code="vm.result" prism>
</pre>

完成。

总结：还是要研究一下，做到以后不管什么插件都能轻易用在项目中。