Contents

import AlpineComponent from "@js/alpine/component";
import Highlighter from "@js/highlighter";

export default AlpineComponent("code", ({ lang }) => {
  return {
    lang,
    output: "",
    wrap: false,
    theme: "github-light",

    init() {
      this.highlightCode();
    },

    async highlightCode() {
      this.output = await this.highlighter.highlight(this.source, {
        theme: this.theme,
      });
    },

    get highlighter() {
      return new Highlighter(this.lang);
    },

    get source() {
      return this.$refs.source.innerText;
    },
  };
});

Version data entries

3 entries across 3 versions & 1 rubygems

Version	Path
lookbook-3.0.0.alpha.2	app/components/lookbook/ui/elements/code/code.js
lookbook-3.0.0.alpha.1	app/components/lookbook/ui/elements/code/code.js
lookbook-3.0.0.alpha.0	app/components/lookbook/ui/elements/code/code.js