Fix doc example syntax highlightings

ngeenx · Oct 2, 2024 · c4cfb54 · c4cfb54
1 parent d48a5b3
commit c4cfb54
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/docs/docs/react/usage.mdx b/docs/docs/react/usage.mdx
@@ -10,7 +10,7 @@ Use the following steps to use the Nx React SVG Loaders in your React project.
 
 Import selected `Nx{SELECTED}Loader` component into your component or module and then use with `<Nx{SELECTED}Loader>` tag.
 
-```js title="app.tsx"
+```tsx title="app.tsx"
 import { useState } from "react";
 
 // highlight-next-line
@@ -40,7 +40,7 @@ const App = (props: IAppProps) => {
 You can set custom color to the loader by passing `style.color` prop to the loader component or any parent element.
 SVG loader will inherit the color from the parent element with `currentColor` value.
 
-```js title="app.tsx"
+```tsx title="app.tsx"
 // highlight-next-line
 import { NxOvalLoader } from "@ngeenx/nx-react-svg-loaders";
 
@@ -74,7 +74,7 @@ You can set horizontal alignment to the loader by passing `isCentered` prop to t
 
 First you need to import the styles in your `styles.scss` or `App.svelte` file (also see source code of the **[styles.css](https://github.com/ngeenx/nx-svg-loaders/blob/main/libs/utils/nx-svg-shared-utils/src/styles/base-loader.component.scss)**).
 
-```js title="App.tsx"
+```tsx title="App.tsx"
 ...
 
 // highlight-next-line

diff --git a/docs/docs/svelte/usage.mdx b/docs/docs/svelte/usage.mdx
@@ -13,7 +13,7 @@ Use the following steps to use the Nx Svelte SVG Loaders in your Svelte project.
 
 Import selected `Nx{SELECTED}Loader` component into your component or module and then use with `<Nx{SELECTED}Loader>` tag.
 
-```js title="app.svelte"
+```html title="app.svelte"
 <script lang="ts">
   // highlight-next-line
   import { NxOvalLoader } from '@ngeenx/nx-svelte-svg-loaders';
@@ -43,7 +43,7 @@ Import selected `Nx{SELECTED}Loader` component into your component or module and
 You can set custom color to the loader by passing `style.color` prop to the loader component or any parent element.
 SVG loader will inherit the color from the parent element with `currentColor` value.
 
-```js title="app.svelte"
+```html title="app.svelte"
 <div>
   <!-- ... -->
 
@@ -77,7 +77,7 @@ First you need to import the styles in your `styles.scss` or `App.tsx` file (als
 
 Then you can use the `isCentered` prop in your component.
 
-```js title="app.svelte"
+```html title="app.svelte"
 <div>
   // highlight-next-line
   <NxHeartsLoader isLoading={true} size={100} isCentered={true} />

diff --git a/docs/docs/vue/usage.mdx b/docs/docs/vue/usage.mdx
@@ -15,7 +15,7 @@ Import selected `Nx{SELECTED}Loader` component into your component or module and
 
 <Tabs>
   <TabItem value="options-api" label="Options API" default>
-```js title="app.vue"
+```html title="app.vue"
 <template>
   <div>
     // highlight-next-line
@@ -48,7 +48,7 @@ export default {
 ```
   </TabItem>
   <TabItem value="composition-api" label="Composition API">
-```js title="app.vue"
+```html title="app.vue"
 <template>
   <div>
     // highlight-next-line
@@ -98,7 +98,7 @@ You can set horizontal alignment to the loader by passing `isCentered` prop to t
 
 First you need to import the styles in your `styles.scss` or `App.vue` file (also see source code of the **[styles.css](https://github.com/ngeenx/nx-svg-loaders/blob/main/libs/utils/nx-svg-shared-utils/src/styles/base-loader.component.scss)**).
 
-```js title="App.vue"
+```html title="App.vue"
 <template>
   <div>
     // highlight-next-line