ui/lib/shared/addon/components/code-block/component.js

43 lines
1.0 KiB
JavaScript

import Component from '@ember/component';
import layout from './template';
import { observer, computed } from '@ember/object'
import prismjs from 'prismjs';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-yaml';
import 'prismjs/components/prism-json';
export default Component.extend({
layout,
language: 'javascript',
code: '',
hide: false,
constrained: true,
tagName: 'PRE',
classNames: ['line-numbers'],
classNameBindings: ['languageClass', 'hide:hide', 'constrained:constrained'],
highlighted: null,
didReceiveAttrs() {
this.highlightedChanged();
},
highlightedChanged: observer('language', 'code', function() {
var lang = this.get('language');
this.set('highlighted', prismjs.highlight(this.get('code') || '', prismjs.languages[lang], lang));
}),
languageClass: computed('language', function() {
var lang = this.get('language');
if ( lang ) {
return `language-${ lang }`;
}
return 'language-javascript';
}),
});