Mark

const markFixture = {
  id: "mark",
  text: "not the argument",
} satisfies { id: string; text: string };
 
import { Mark } from "@grassroot/ui-react";
 
export default function MarkDemo() {
  return (
    <div>
      <p>
        Ship the interface, <Mark>{markFixture.text}</Mark>.
      </p>
    </div>
  );
}

<script setup lang="ts">
import { Mark } from "@grassroot/ui-vue";
const markFixture = {
  id: "mark",
  text: "not the argument",
} satisfies { id: string; text: string };
 
</script>
 
<template>
  <div>
    <p>
      Ship the interface, <Mark>{{ markFixture.text }}</Mark
      >.
    </p>
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootMark } from "@grassroot/ui-angular";
const markFixture = {
  id: "mark",
  text: "not the argument",
} satisfies { id: string; text: string };
 
@Component({
  selector: "app-mark-demo",
  standalone: true,
  imports: [GrassrootMark],
  template: `<div>
    <p>
      Ship the interface, <mark grassrootMark>{{ fixture.text }}</mark
      >.
    </p>
  </div>`,
})
export class MarkDemoComponent {
  protected readonly fixture = markFixture;
}
 
export default MarkDemoComponent;

<script lang="ts">
  import { Mark } from "@grassroot/ui-svelte";
  const markFixture = {
    id: "mark",
    text: "not the argument",
  } satisfies { id: string; text: string };
 
  </script>
 
<div><p>Ship the interface, <Mark>{markFixture.text}</Mark>.</p></div>

/** @jsxImportSource solid-js */
import { Mark } from "@grassroot/ui-solid";
const markFixture = {
  id: "mark",
  text: "not the argument",
} satisfies { id: string; text: string };
 
export default function MarkDemo() {
  return (
    <div>
      <p>
        Ship the interface, <Mark>{markFixture.text}</Mark>.
      </p>
    </div>
  );
}