Partas.Solid.MdxUtils 0.1.0

Partas.Solid.MdxUtils

Utility library package for streamlining making doc pages with MDX and Partas.Solid.

Requirements:

• Tailwindcss
• Vite

Femto Installation:

femto install Partas.Solid.MdxUtils

This will automatically install the required dependencies.

<NpmPackage Name="solid-jsx" Version=">= 1.1.4" DevDependency="true" />
<NpmPackage Name="tailwindcss" Version=">= 4.1.0" />
<NpmPackage Name="@tailwindcss/vite" />
<NpmPackage Name="@tailwindcss/typography" Version=">= 0.5.16" DevDependency="true" />
<NpmPackage Name="@mdx-js/rollup" Version=">= 3.1.0" />
<NpmPackage Name="clsx" Version=">= 2.1.1" />
<NpmPackage Name="tailwind-merge" Version=">= 2.6.0" />
<NpmPackage Name="rehype-pretty-code" Version=">= 0.14.1" DevDependency="true" />
<NpmPackage Name="remark-gfm" Version=">= 4.0.1" DevDependency="true" />
<NpmPackage name="@shikijs/transformers" Version=">= 3.2.1" DevDependency="true" />

Ensure you setup your css file with tailwind and typography:

@import 'tailwindcss';
@plugin "@tailwindcss/typography";

If there are issues with the inlined style, then you'll have to manually add the following to your main .css

code[data-line-numbers] {
    counter-reset: line;
}

code[data-line-numbers] > [data-line]::before {
    counter-increment: line;
    content: counter(line);

    /* Other styling */
    display: inline-block;
    width: 0.75rem;
    margin-right: 2rem;
    text-align: right;
    color: gray;
}

code[data-line-numbers-max-digits="2"] > [data-line]::before {
    width: 1.25rem;
}

code[data-line-numbers-max-digits="3"] > [data-line]::before {
    width: 1.75rem;
}

code[data-line-numbers-max-digits="4"] > [data-line]::before {
    width: 2.25rem;
}

[data-rehype-pretty-code-title] {
    @apply bg-zinc-700 text-zinc-200 rounded-t-lg py-2 -mb-1 px-3 font-semibold text-sm;
}

Usage

MdxStyler() {
    // ... place your mdx page components in here
}

MdxStyler(
    highlightedLinesTwClasses = "black", // set tailwind class for highlighted line color
    highlightedCharsTwClasses = "black", // set tailwind class for highlighted text color
    maxHeight = Some 500 // set max height for code blocks
)