Language Identifiers (#171)

* feat(lang ids): add `data-language` attr to `pre` * feat(lang ids): add langtag options (+types +docs) * docs: fix formatting * change: apply `langtag` prop in test
metonym · Sep 12, 2021 · b3dbb26 · b3dbb26
1 parent 7507a02
commit b3dbb26
Show file tree

Hide file tree

Showing 9 changed files with 242 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -139,6 +139,52 @@ The `HighlightAuto` component invokes the `highlightAuto` API from `highlight.js
 ```
 <!-- prettier-ignore-end -->
 
+## Language Targeting
+
+All `Highlight` components apply a `data-language` attribute on the codeblock containing the language name.
+
+This is also compatible with custom languages.
+
+See the [Languages page](SUPPORTED_LANGUAGES.md) for a list of supported languages.
+
+<!-- prettier-ignore-start -->
+```css
+pre.hljs[data-language="css"] {
+  /* custom style rules */
+}
+```
+<!-- prettier-ignore-end -->
+
+## Language Tags
+
+All `Highlight` components allow for a tag to be added at the top-right of the codeblock displaying the language name.
+
+The language tag can be given a custom `background`, `color`, and `border-radius` through the custom properties shown.
+
+This is also compatible with custom languages.
+
+See the [Languages page](SUPPORTED_LANGUAGES.md) for a list of supported languages.
+
+<!-- prettier-ignore-start -->
+```svelte
+<script>
+  import { HighlightAuto } from "svelte-highlight";
+
+  $: code = `.body { padding: 0; margin: 0; }`;
+</script>
+
+<HighlightAuto {code} langtag="{true}" />
+```
+
+```css
+pre.hljs[data-language="css"] {
+  --hljs-background: linear-gradient(135deg, #2996cf, 80%, white);
+  --hljs-foreground: #fff;
+  --hljs-radius: 8px;
+}
+```
+<!-- prettier-ignore-end -->
+
 ## Custom Language
 
 For custom language highlighting, pass a `name` and `register` function to the language prop.

diff --git a/demo/routes/index.svelte b/demo/routes/index.svelte
@@ -12,6 +12,10 @@
   import ScopedStyleSvelte from "$lib/ScopedStyleSvelte.svelte";
   import ScopedStyleAuto from "$lib/ScopedStyleAuto.svelte";
 
+  // see lines 187-267
+  import HighlightSvelte from "../../src/HighlightSvelte.svelte";
+  import HighlightAuto from "../../src/HighlightAuto.svelte";
+
   const NAME = process.env.NAME;
 
   const sveltekit = `export default {
@@ -181,6 +185,83 @@
   </Column>
 </Row>
 
+<!-- start: uses HighlightAuto and HighlightSvelte, refactor? -->
+<Row>
+  <Column>
+    <h3>Language Targeting</h3>
+  </Column>
+</Row>
+
+<Row class="mb-7">
+  <Column xlg="{10}" lg="{10}">
+    <p class="mb-5">
+      All <code class="code">Highlight</code> components apply a
+      <code class="code">data-language</code> attribute on the codeblock containing
+      the language name.
+    </p>
+    <p class="mb-5">This is also compatible with custom languages.</p>
+    <p class="mb-5">
+      See the <Link size="lg" href="{base}/languages">Languages page</Link> for a
+      list of supported languages.
+    </p>
+  </Column>
+  <Column noGutter>
+    <HighlightAuto
+      code="{'pre.hljs[data-language="css"] {\n\t/* custom style rules */\n}'}"
+      class="atomOneDark"
+    />
+  </Column>
+</Row>
+
+<Row>
+  <Column>
+    <h3>Language Tags</h3>
+  </Column>
+</Row>
+
+<Row class="mb-7">
+  <Column xlg="{10}" lg="{10}">
+    <p class="mb-5">
+      All <code class="code">Highlight</code> components allow for a tag to be added
+      at the top-right of the codeblock displaying the language name.
+    </p>
+    <p class="mb-5">
+      The language tag can be given a custom <code class="code">background</code
+      >, <code class="code">color</code>, and
+      <code class="code">border-radius</code> through the custom properties shown.
+    </p>
+    <p class="mb-5">This is also compatible with custom languages.</p>
+    <p class="mb-5">
+      See the <Link size="lg" href="{base}/languages">Languages page</Link> for a
+      list of supported languages.
+    </p>
+  </Column>
+  <Column noGutter>
+    <HighlightSvelte
+      code="{`<script>
+  import { HighlightAuto } from "svelte-highlight";
+
+   $: code = \`.body { padding: 0; margin: 0; }\`;
+<\/script>
+
+<HighlightAuto {code} langtag="{true}" \/>`}"
+      class="atomOneDark"
+      langtag="{true}"
+    />
+    <HighlightAuto
+      code="{`pre.hljs[data-language="css"] {
+  --hljs-background: linear-gradient(135deg, #2996cf, 80%, white);
+  --hljs-foreground: #fff;
+  --hljs-radius: 8px;
+}`}"
+      class="atomOneDark"
+      langtag="{true}"
+    />
+    <style></style>
+  </Column>
+</Row>
+<!-- end: uses HighlightAuto and HighlightSvelte, refactor? -->
+
 <Row noGutter>
   <Column>
     <hr />

diff --git a/src/Highlight.svelte b/src/Highlight.svelte
@@ -13,6 +13,13 @@
    */
   export let code = undefined;
 
+  /**
+   * Add a language tag to the top-right
+   * of the code block
+   * @type {boolean}
+   */
+  export let langtag = false;
+
   import hljs from "highlight.js/lib/core";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
@@ -33,6 +40,8 @@
 <slot highlighted="{highlighted}">
   <pre
     class:hljs="{true}"
+    class:langtag
+    data-language="{(language.name && language.name) || 'plaintext'}"
     {...$$restProps}>
     <code>
       {#if highlighted !== undefined}
@@ -41,3 +50,24 @@
     </code>
   </pre>
 </slot>
+
+<style>
+  pre.langtag {
+    position: relative;
+  }
+  pre.langtag::after {
+    content: attr(data-language);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: calc(1em + 3px) calc(1em + 5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: inherit;
+    color: inherit;
+    background: var(--hljs-background);
+    color: var(--hljs-foreground);
+    border-radius: var(--hljs-radius);
+  }
+</style>
diff --git a/src/HighlightAuto.svelte b/src/HighlightAuto.svelte
@@ -10,23 +10,35 @@
    */
   export let code = undefined;
 
+  /**
+   * Add a language tag to the top-right
+   * of the code block
+   * @type {boolean}
+   */
+  export let langtag = false;
+
   import hljs from "highlight.js/lib/core";
   import { createEventDispatcher, afterUpdate } from "svelte";
 
   const dispatch = createEventDispatcher();
 
   let highlighted = undefined;
+  let language = undefined;
 
   afterUpdate(() => {
     if (highlighted) dispatch("highlight", { highlighted });
   });
 
-  $: if (code) highlighted = hljs.highlightAuto(code).value;
+  $: if (code) {
+    ({ value: highlighted, language } = hljs.highlightAuto(code));
+  }
 </script>
 
 <slot highlighted="{highlighted}">
   <pre
     class:hljs="{true}"
+    class:langtag
+    data-language="{(language && language) || 'plaintext'}"
     {...$$restProps}>
       <code>
         {#if highlighted !== undefined}
@@ -35,3 +47,24 @@
       </code>
     </pre>
 </slot>
+
+<style>
+  pre.langtag {
+    position: relative;
+  }
+  pre.langtag::after {
+    content: attr(data-language);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: calc(1em + 3px) calc(1em + 5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: inherit;
+    color: inherit;
+    background: var(--hljs-background);
+    color: var(--hljs-foreground);
+    border-radius: var(--hljs-radius);
+  }
+</style>
diff --git a/src/HighlightSvelte.svelte b/src/HighlightSvelte.svelte
@@ -10,6 +10,13 @@
    */
   export let code = undefined;
 
+  /**
+   * Add a language tag to the top-right
+   * of the code block
+   * @type {boolean}
+   */
+  export let langtag = false;
+
   import hljs from "highlight.js/lib/core";
   import xml from "highlight.js/lib/languages/xml";
   import javascript from "highlight.js/lib/languages/javascript";
@@ -32,9 +39,32 @@
 <slot highlighted="{highlighted}">
   <pre
     class:hljs="{true}"
+    class:langtag
+    data-language="svelte"
     {...$$restProps}>
     <code>
       {@html highlighted}
     </code>
   </pre>
 </slot>
+
+<style>
+  pre.langtag {
+    position: relative;
+  }
+  pre.langtag::after {
+    content: attr(data-language);
+    position: absolute;
+    top: 0;
+    right: 0;
+    padding: calc(1em + 3px) calc(1em + 5px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: inherit;
+    color: inherit;
+    background: var(--hljs-background);
+    color: var(--hljs-foreground);
+    border-radius: var(--hljs-radius);
+  }
+</style>
diff --git a/test/SvelteHighlight.test.svelte b/test/SvelteHighlight.test.svelte
@@ -21,12 +21,13 @@
 </svelte:head>
 
 <!-- svelte-ignore missing-declaration -->
-<HighlightAuto code="{toggled ? code : codeSvelte}" />
+<HighlightAuto code="{toggled ? code : codeSvelte}" langtag="{true}" />
 
 <!-- svelte-ignore missing-declaration -->
 <Highlight
   language="{toggled ? javascript : typescript}"
   code="{code}"
+  langtag="{true}"
   on:highlight="{(e) => {
     console.log(e.detail.highlighted);
   }}"
@@ -36,4 +37,4 @@
 </Highlight>
 
 <!-- svelte-ignore missing-declaration -->
-<HighlightSvelte code="{codeSvelte}" on:highlight />
+<HighlightSvelte code="{codeSvelte}" langtag="{true}" on:highlight />
diff --git a/types/Highlight.d.ts b/types/Highlight.d.ts
@@ -15,6 +15,12 @@ export interface HighlightProps
    * Source code to highlight
    */
   code?: string;
+
+  /**
+   * Add a language tag to the top-right
+   * of the code block
+   */
+  langtag?: boolean;
 }
 
 export default class Highlight extends SvelteComponentTyped<

diff --git a/types/HighlightAuto.d.ts b/types/HighlightAuto.d.ts
@@ -7,6 +7,12 @@ export interface HighlightAutoProps
    * Source code to highlight
    */
   code?: string;
+
+  /**
+   * Add a language tag to the top-right
+   * of the code block
+   */
+  langtag?: boolean;
 }
 
 export default class HighlightAuto extends SvelteComponentTyped<

diff --git a/types/HighlightSvelte.d.ts b/types/HighlightSvelte.d.ts
@@ -7,6 +7,12 @@ export interface HighlightSvelteProps
    * Source code to highlight
    */
   code?: string;
+
+  /**
+   * Add a language tag to the top-right
+   * of the code block
+   */
+  langtag?: boolean;
 }
 
 export default class HighlightSvelte extends SvelteComponentTyped<