---
title: Plugin API
---

````yml include
name: "ExpressiveCodePlugin"
headingLevel: 2
replacements:
- search: '(\[`?ExpressiveCodePluginHooks`?\])\(.*?\)'
  replace: '$1(/reference/plugin-hooks/)'
````

````yml include
name: "PluginStyleSettings"
headingLevel: 2
````

````yml include
name: "AttachedPluginData"
headingLevel: 2
editSections:
- path: ""
  append: |
    ### Usage example

    ```ts
    // pluginDataExample.ts
    import { AttachedPluginData, ExpressiveCodePlugin } from '@expressive-code/core'

    export function pluginDataExample(): ExpressiveCodePlugin {
      return {
        name: 'AttachedPluginDataExample',
        hooks: {
          preprocessMetadata: ({ codeBlock }) => {
            // Get a reference to the block's data object
            const blockData = pluginFramesData.getOrCreateFor(codeBlock)

            // Example: Store the meta string in the data object
            // and remove it from the block
            blockData.extractedMeta = codeBlock.meta
            codeBlock.meta = ''
          },
          postprocessRenderedBlock: ({ codeBlock }) => {
            // Try to retrieve the stored title from the block's data object
            const blockData = pluginFramesData.getOrCreateFor(codeBlock)

            // Log the extracted data
            console.dir(blockData)
          },
        },
      }
    }

    // Define the data object type
    export interface PluginFramesData {
      extractedMeta?: string
    }

    // Create a singleton instance that allows attaching this type of data
    // to any object and to retrieve it later.
    // Note: Exporting is optional. This can be useful if multiple plugins
    //       need to work together.
    export const pluginFramesData = new AttachedPluginData<PluginFramesData>(
      // This function initializes the attached data
      // in case nothing was attached to an object yet
      () => ({})
    )
    ```
````

## Referenced types

````yml include
name: "BaseStylesResolverFn"
headingLevel: 3
editSections:
- path: ""
  append: |
    A function that you can assign to the [`baseStyles`](#basestyles) property of an [`ExpressiveCodePlugin`](#expressivecodeplugin).

    The engine will call it when going through all registered plugins and collecting their base styles.

    :::tip
    You can use this to include CSS variables generated from any style settings, including your own [`PluginStyleSettings`](#pluginstylesettings), into your plugin's base styles.
    
    The function will be called with a `context` argument of type [`ResolverContext`](#resolvercontext) that provides helpful functions like `cssVar` to access any generated CSS variable by its style setting path.
    :::
````

````yml include
name: "JsModulesResolverFn"
headingLevel: 3
editSections:
- path: ""
  append: |
    A function that you can assign to the [`jsModules`](#jsmodules) property of an [`ExpressiveCodePlugin`](#expressivecodeplugin).

    The engine will call it when going through all registered plugins and collecting their JS modules.
````

````yml include
name: "ResolverContext"
headingLevel: 3
````

````yml include
name: "ResolvedStyleSettingsByPath"
headingLevel: 3
````

````yml include
name: "StyleResolverFn"
headingLevel: 3
````

````yml include
name: "StyleSettingPath"
headingLevel: 3
````

````yml include
name: "StyleValueOrValues"
headingLevel: 3
````

````yml include
name: "StyleVariant"
headingLevel: 3
````

````yml include
name: "UnresolvedPluginStyleSettings"
headingLevel: 3
````

````yml include
name: "UnresolvedStyleValue"
headingLevel: 3
````

````yml include
name: "UnresolvedStyleSettings"
headingLevel: 3
````
