Styled Text

Styled Text (styled_text)

Defines the map of options for Platen’s Styled Text markup. The existing value is a map that includes whether or not to enable the image render hook and its style definition.

You can add new keys or replace the values for existing ones. You don’t need to keep the full list of all properties in your own configuration file. Only specify the values you want to add or replace.

JSON Schema

Definition
{
  "$id": "https://platen.io/modules/platen/config/site/markup/styled_text/schema.json",
  "$schema": "https://json-schema.org/draft/2020-12/schema",
  "description": "Defines the options for Platen's Styled Text markup.\n\nhttps://platen.io/modules/platen/config/site/markup/styled_text/",
  "properties": {
    "aliases": {
      "description": "Defines additional prefixes for the image render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/styled_text/#aliases",
      "oneOf": [
        {
          "items": {
            "type": "string"
          },
          "type": "array"
        },
        {
          "type": "string"
        }
      ],
      "title": "Aliases"
    },
    "enabled": {
      "default": true,
      "description": "Whether to enable the Styled Text markup option for the site\n\nhttps://platen.io/modules/platen/config/site/markup/styled_text/#enabled",
      "title": "Enable the markup option",
      "type": "boolean"
    },
    "partials": {
      "description": "Define a map of partials for Platen to inject as needed.\n\nhttps://platen.io/modules/platen/config/site/markup/styled_text/#partials",
      "properties": {
        "renderers": {
          "description": "Registers one or more partials that act as render hooks.\n\nhttps://platen.io/modules/platen/config/site/markup/styled_text/#renderers",
          "properties": {
            "image": {
              "default": "platen/markup/styled_text/image",
              "description": "Adds a partial to call when processing the image render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/styled_text/#image",
              "title": "Image Render Hook Partial",
              "type": "string"
            }
          },
          "title": "Renderer Partials",
          "type": "object"
        }
      },
      "title": "Markup Partials",
      "type": "object"
    }
  },
  "title": "Styled Text",
  "type": "object"
}

Enable the markup option (enabled)

Choose whether the site renders image links with the styled: prefix in their alt text as spans or normal image links. If this setting is set to true, any image links added with the prefix are rendered as spans (<span>) elements. If this setting is false, the image links are rendered as normal.

Aliases (aliases)

Define one or more prefixes to use in addition to the default prefix (styled) for styled text image links.

You can specify a string or an array of strings. If the value is an array, each item in the array is added as an alias. Do not add a : suffix.

Markup Partials (partials)

Define a map of partials for Platen to inject as needed. These partials are only injected when enabled is set to true.

Renderer Partials (renderers)

Defines a map of partials to use as Markdown render hooks. Like all partials, these are only processed when enabled is set to true.

Supported renderer partials include:

  • codeblock, processed for fenced code blocks with a language ID
  • heading, processed for headings
  • image, processed for image links
  • link, processed for non-image links

In all cases, all renderer partials for enabled features and markup options are checked one after the other unless they return a render string. Only the first applicable partial that returns a render string is processed and rendered.

Image Render Hook Partial (image)

Adds support for rendering image links as styled text spans in Platen. This render hook is only called if the alt text for the image (i.e. ![altText](source "title")) has the styled: prefix. If the image link does have the prefix, it’s processed for adding a span ([sref:<span>]) element.

For more information about how to use this render partial, see the reference documentation for this render hook.

For more information about defining image render hook partials, see Defining an Image Render Hook Partial in the Theme Guide.

Edit this page