mirror of
https://github.com/discourse/discourse.git
synced 2024-12-25 15:43:43 +08:00
62d00722e1
the radical change in the implementation doesn't stem from the glimmer migration, but rather the fact that previously the component was single-use – changing any of its args didn't (and couldn't) be reflected because hljs was replacing the nodes so all the ember bookkeeping was gone. Co-authored-by: David Taylor <david@taylorhq.com>
26 lines
723 B
Plaintext
26 lines
723 B
Plaintext
import Component from "@glimmer/component";
|
|
import { service } from "@ember/service";
|
|
import { modifier } from "ember-modifier";
|
|
import highlightSyntax from "discourse/lib/highlight-syntax";
|
|
|
|
export default class HighlightedCode extends Component {
|
|
@service session;
|
|
@service siteSettings;
|
|
|
|
highlight = modifier(async (element) => {
|
|
const code = document.createElement("code");
|
|
code.classList.add(`lang-${this.args.lang}`);
|
|
code.textContent = this.args.code;
|
|
|
|
const pre = document.createElement("pre");
|
|
pre.appendChild(code);
|
|
|
|
element.replaceChildren(pre);
|
|
await highlightSyntax(pre, this.siteSettings, this.session);
|
|
});
|
|
|
|
<template>
|
|
<div {{this.highlight}}></div>
|
|
</template>
|
|
}
|