Common components

Available components:

• Video embeds
• Audio
• Code blocks
• Callouts
• Code Tabs
• Icons

Reference only:

• Recipes

Builtin

Video embeds

Embed YouTube videos using the VideoEmbed component. To use this component, you will need to get the ID of the video you want to embed, which can be easily copied from the video URL’s v parameter.

For example, the ID for https://www.youtube.com/watch?v=Y_WnAEKoeA4 would be Y_WnAEKoeA4.

You can then directly pass this ID to the component as shown below.

<VideoEmbed id="Y_WnAEKoeA4"/>

Audio

Identical to the audio html tag, but the src is specified as an asset resource location including the file extension.

Example:

<!-- Plays <root>/assets/examplemod/sounds/ambient.ogg -->
<Audio controls src="examplemod:sounds/ambient.ogg"/>

Code blocks

Code blocks on the Wiki are enhanced with syntax highlighting and can optionally display a file name as well.

<!-- With language and file name -->
```json my-file.json
{
    "id": "hello-world"
}
```
 
<!-- Language only -->
```json
{
    "id": "hello-world"
}
```

Styling

Callout

Draw the reader’s attention with callouts.

Properties

• type
  • Can be either of [info, tip, warning, danger] (default: info)
• title
  • Custom title to display. Optional
• collapsible
  • Makes the callout collapsible. Optional
• collapsed
  • Makes a callout collapsible and collapsed by default. Optional

Code

<Callout>
    This is a sample callout
</Callout>
 
<Callout type="info">
    This is a sample info callout
</Callout>
 
<Callout title="Expand me!" collapsed>
    This callout is collapsed by default
</Callout>

CodeTabs

The Wiki implements CodeHike’s CodeTabs  component as shown below.

This can be useful if you want to show separate variants for Gradle/Kotlin DSL code in developer documentation.

Code

<CodeTabs>
 
```js !!tabs main.js
function lorem(ipsum, dolor = 1) {
    const sit = ipsum == null ? 0 : ipsum.sit
    dolor = sit - amet(dolor)
    return sit ? consectetur(ipsum) : []
}
```
 
```css !!tabs styles.css
body {
    margin: 0;
    padding: 0;
}
```
 
</CodeTabs>

Icons

The entire collection of Lucide icons  is available to use in documentation files via React components.

Names of icon components consist of an icon’s “component name” (which you can find on the website or make an educated guess by converting the icon id to PascalCase (e.g. align-vertical-justify-start -> AlignVerticalJustifyStart) and the Icon suffix.

All properties supported by Lucide React  are available as well.

Code

<SquirrelIcon width={64} height={64} strokeWidth={1} />

Result

Recipes

ProjectRecipe

Displays an interactive recipe for a single item. This is similar to pressing R on your keyboard when using in-game recipe viewers.

Properties

• id*
  • ID of the recipe to display

RecipeUsage

Displays a list of items that can be crafted/obtained through recipes using this item. This is similar to pressing U on your keyboard when using in-game recipe viewers.

Properties

• id*
  • ID of the item to show the usage of