feat: add --langtag-top, --langtag-right style props (#327)

Closes #324

README.md

@@ -283,6 +283,8 @@ See the [Languages page](SUPPORTED_LANGUAGES.md) for a list of supported languag
 
 | Style prop              | Description                     | Default value |
 | :---------------------- | :------------------------------ | :------------ |
+| --langtag-top           | Top position of the langtag     | `0`           |
+| --langtag-right         | Right position of the langtag   | `0`           |
 | --langtag-background    | Background color of the langtag | `inherit`     |
 | --langtag-color         | Text color of the langtag       | `inherit`     |
 | --langtag-border-radius | Border radius of the langtag    | `0`           |

src/Highlight.svelte.d.ts

@@ -8,6 +8,8 @@ export type LangtagProps = {
    * displayed at the top right of the code block.
    *
    * Use style props to customize styles:
+   * - `--langtag-top`
+   * - `--langtag-right`
    * - `--langtag-background`
    * - `--langtag-color`
    * - `--langtag-border-radius`
@@ -17,6 +19,18 @@ export type LangtagProps = {
    */
   langtag?: boolean;
 
+  /**
+   * Customize the top position of the langtag.
+   * @default 0
+   */
+  "--langtag-top"?: string | number;
+
+  /**
+   * Customize the right position of the langtag.
+   * @default 0
+   */
+  "--langtag-right"?: string | number;
+
   /**
    * Customize the background color of the langtag.
    * @default "inherit"

src/LangTag.svelte

@@ -27,8 +27,8 @@
   .langtag::after {
     content: attr(data-language);
     position: absolute;
-    top: 0;
-    right: 0;
+    top: var(--langtag-top, 0);
+    right: var(--langtag-right, 0);
     display: flex;
     align-items: center;
     justify-content: center;

tests/SvelteHighlightPackage.test.svelte

@@ -56,4 +56,6 @@
   --langtag-border-radius=""
   --langtag-color=""
   --langtag-padding=""
+  --langtag-top=""
+  --langtag-right=""
 />

www/components/globals/Index.svelte

@@ -264,18 +264,17 @@
   </Column>
   <Column xlg={6} lg={12}>
     <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.
-      Customize the language tag <code class="code">background</code>,
-      <code class="code">color</code>,
-      <code class="code">border-radius</code>, and
-      <code class="code">padding</code> using style props.
+      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. Customize the
+      language tag using style props.
     </p>
     <p class="mb-5">Defaults:</p>
     <UnorderedList class="mb-5">
-      <ListItem
-        ><code class="code">--langtag-background: inherit</code></ListItem
-      >
+      <ListItem><code class="code">--langtag-top: 0</code></ListItem>
+      <ListItem><code class="code">--langtag-right: 0</code></ListItem>
+      <ListItem>
+        <code class="code">--langtag-background: inherit</code>
+      </ListItem>
       <ListItem><code class="code">--langtag-color: inherit</code></ListItem>
       <ListItem><code class="code">--langtag-border-radius: 0</code></ListItem>
       <ListItem><code class="code">--langtag-padding: 1em</code></ListItem>
@@ -302,13 +301,17 @@
       code={`<HighlightAuto
   {code}
   langtag
+  --langtag-top="0.5rem"
+  --langtag-right="0.5rem"
   --langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
   --langtag-color="#fff"
   --langtag-border-radius="6px"
   --langtag-padding="0.5rem"
 />`}
       class="irBlack"
       langtag
+      --langtag-top="0.5rem"
+      --langtag-right="0.5rem"
       --langtag-background="linear-gradient(135deg, #2996cf, 80%, white)"
       --langtag-color="#fff"
       --langtag-border-radius="6px"