Skip to content

Instantly share code, notes, and snippets.

@imdwit imdwit/snippet.elm
Created Oct 30, 2019

Embed
What would you like to do?
viewSnippet language title snippet =
div [ class "relative my-8" ]
[ p [] [ text title ]
, Html.node "vertol-snippet"
[ Attributes.attribute "snippet" snippet ]
[ pre
[]
[ code
[ class <| "language-" ++ language
]
[]
]
]
]
import Prism from 'prismjs';
import 'prismjs/plugins/normalize-whitespace/prism-normalize-whitespace.js';
Prism.plugins.NormalizeWhitespace.setDefaults({
'remove-trailing': true,
'remove-indent': true,
'left-trim': true,
'right-trim': true,
'break-lines': 80,
});
export default customElements.define(
'vertol-snippet',
class extends HTMLElement {
static get observedAttributes() {
return ['snippet'];
}
constructor() {
super();
this._render = this._render.bind(this);
}
connectedCallback() {
this.$el = this.querySelector('[class*="language"]');
const txt = this.attributes.snippet.textContent;
this._render(txt);
}
attributeChangedCallback(name, oldval, newval) {
if (name == 'snippet') {
this.$el && this._render(newval);
}
}
_render(txt) {
this.$el.innerText = txt.replace(/\n/gi, '\n');
Prism.highlightElement(this.$el);
}
}
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.