> For AI agents: the site index is available at https://www.juniortree.com/llms.txt; this page is available as Markdown at https://www.juniortree.com/docs/integrations/others.md.
> Other integrations that help improve your site

## Page metadata

- **Source URL:** https://www.juniortree.com/docs/integrations/others

# Other Integrations

**Note:**
Docs are still in progress.

## `medium-zoom`

Checkout [medium-zoom](https://github.com/francoischalifour/medium-zoom) for more.

```ts title="src/site.config.ts"
export const integ: IntegrationUserConfig = {
  // ...
  // A lightbox library that can add zoom effect
  mediumZoom: {
    enable: true, // disable it will not load the whole library
    selector: '.prose .zoomable',
    options: {
      className: 'zoomable'
    }
  }
}
```

This theme has integrated it in `BlogPost.astro` by default, which means any content in `src/content/blog` doesn't need to import. If you want to use it in any other layout or page, you can use the following code:

#### Astro

```astro
---
import { MediumZoom } from 'astro-pure/advanced'
---

<div class="prose">
  <img src="/path/to/image.jpg" class="zoomable" />
</div>

<MediumZoom />
{/* Or with configs */}
<MediumZoom
  selector=".prose .zoomable"
  background="rgba(0, 0, 0, 0.7)"
 />
```

#### MDX

```tsx
import { MediumZoom } from 'astro-pure/advanced'

// .zoomable class will automatically added using remark plugin
![](path/to/image.jpg)

<MediumZoom />
// Or with configs
<MediumZoom
  selector=".prose .zoomable"
  background="rgba(0, 0, 0, 0.7)"
 />
```

## `@playform/compress`

Checkout [playform/compress](https://github.com/PlayForm/Compress) for more.

## Friend-Circle-Lite

See [Friend Links #Integrated with `Friend-Circle-Lite`](/docs/integrations/links#integrated-with-friend-circle-lite).

## LateX support

In case any time in the future this theme removes default support for LateX, there's a tutorial to help you add support for it.

Rendering LaTeX in Astro.js enriches your markdown files with mathematical expressions, making your content both engaging and informative. The following steps outline the necessary steps to integrate LaTeX into Astro.js and addresses potential pitfalls along with their solutions.

1. Install Necessary Packages

   Begin by installing `remark-math` and `rehype-katex`. These packages parse and render LaTeX respectively. Use the install commands:

   ```shell
   bun install remark-math rehype-katex
   ```

2. Configure Astro

   Modify your Astro configuration to use these plugins. Add the plugins to the markdown configuration section in your astro.config.mjs:

   ```js title="astro.config.mjs"
   import { defineConfig } from 'astro/config';
   import remarkMath from 'remark-math';
   import rehypeKatex from 'rehype-katex';

   export default defineConfig({
      // ...
      markdown: {
         remarkPlugins: [remarkMath],
         rehypePlugins: [rehypeKatex],
      },
   });
   ```

3. Include KaTeX CSS

   To ensure that LaTeX formulas are styled correctly, include the KaTeX CSS in your HTML layout (in this theme it would be in the `BlogPost.astro` file). Add the following css resources:

   ```astro title="src/layouts/BlogPost.astro"
   ---
   import 'katex/dist/katex.min.css'
   ---
   ```

   Or use CDN to fasten speed:

   ```astro title="src/layouts/BlogPost.astro"
   ---
   import config from '@/site-config'
   ---
   <link rel="stylesheet" href={`${config.npmCDN}/katex@0.16.15/dist/katex.min.css`}>
   ```

4. Some CSS code is recommended:

   To ensure that the LaTeX formulas are displayed better, you may need to add the following code to `public/styles/global.css`:

   ```css
   span.katex-display {
     overflow-y: scroll;
     padding: 0.5rem;
   }
   .katex-html {
     overflow: auto hidden;
     padding: 3px;
   }
   .katex-html .base {
     margin-block: 0;
     margin-inline: auto;
   }
   .katex-html .tag {
     position: relative !important;
     display: inline-block;
     padding-inline-start: 0.5rem;
   }
   ```

Common Pitfalls and Solutions:

- CSS Styling Issues

  Problem: LaTeX formulas might not render with the correct styles if the KaTeX CSS isn’t loaded.

  Solution: Confirm the KaTeX stylesheet link is correctly placed in the HTML head and is loading without issues. Check for network errors or restrictions that might prevent the CSS from loading.

- Build Errors

  Problem: Errors during build time when processing LaTeX syntax.

  Solution: Ensure that your LaTeX is correctly formatted and that there are no syntax errors in your markdown files. LaTeX syntax errors can break the parser and cause build failures.