Columns (columns)
Defines the map of options for Platen’s columns markup. The existing value is a map that includes whether or not to enable the option and the style definition for it.
When this markup is enabled, you can create columns for content on a page with a codeblock.
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/columns/schema.json",
"$schema": "https://json-schema.org/draft/2020-12/schema",
"description": "Defines the options for Platen's columns markup\n\nhttps://platen.io/modules/platen/config/site/markup/columns/",
"properties": {
"aliases": {
"description": "Defines additional language IDs for the codeblock render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#aliases",
"oneOf": [
{
"items": {
"oneOf": [
{
"description": "A map defining either/both an alias for the grouping and entry codeblock language ID.\n\nhttps://platen.io/modules/platen/config/site/markup/columns/",
"properties": {
"entry": {
"description": "Alias for the nested codeblock language ID, (default is 'column').\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#entry",
"title": "Entry Alias",
"type": "string"
},
"group": {
"description": "Alias for the top-level codeblock language ID, (default is 'columns').\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#group",
"title": "Group Alias",
"type": "string"
}
},
"type": "object"
},
{
"type": "string"
}
]
},
"type": "array"
},
{
"description": "A map defining either/both an alias for the grouping and entry codeblock language ID.\n\nhttps://platen.io/modules/platen/config/site/markup/columns/",
"properties": {
"entry": {
"description": "Alias for the nested codeblock language ID, (default is 'column').\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#entry",
"title": "Entry Alias",
"type": "string"
},
"group": {
"description": "Alias for the top-level codeblock language ID, (default is 'columns').\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#group",
"title": "Group Alias",
"type": "string"
}
},
"type": "object"
},
{
"type": "string"
}
],
"title": "Aliases"
},
"enabled": {
"default": true,
"description": "Whether to enable the column codeblock rendering for the site\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#enabled",
"title": "Enable the markup",
"type": "boolean"
},
"partials": {
"description": "Define a map of partials for Platen to inject as needed.\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#partials",
"properties": {
"renderers": {
"description": "Registers one or more partials that act as render hooks.\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#renderers",
"properties": {
"codeblock": {
"default": "platen/markup/columns/codeblock",
"description": "Adds a partial to call when processing the codeblock render hook.\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#codeblock",
"title": "Codeblock Render Hook Partial",
"type": "string"
}
},
"title": "Renderer Partials",
"type": "object"
}
},
"title": "Markup Partials",
"type": "object"
},
"style": {
"default": "columns",
"description": "Defines the markup's simple style module\n\nhttps://platen.io/modules/platen/config/site/markup/columns/#style",
"title": "Markup Simple Style Module",
"type": "string"
}
},
"title": "Columns",
"type": "object"
}Enable the markup (enabled)
Choose whether the site renders codeblocks with the columns language ID as a group of
columns with a flexible width. If this setting is set to true, content inside the
codeblock is added inside a <div> that renders child divs as columns. If this setting is
false, the content is rendered as an unhighlighted codeblock.
Aliases (aliases)
Define one or more language IDs to use in addition to the default language IDs for codeblocks
that render their content in a group of divs as columns. The default for the top-level
codeblock for the column group is columns. The default for the nested codeblock defining a
single column is column.
You can specify a string, a map, or an array of strings or maps for this value. If the value is an array, each item in the array is added as an alias.
String values are added as valid language IDs for the top-level codeblock in addition to
columns.
Map values must have either the group or entry key with a string value. If you
define a value for group, it becomes a valid language ID for the top-level codeblock. If
you define a value for entry, it becomes a valid language ID for the nested codeblock. You
can specify both in a single map but don’t have to.
Markup Simple Style Module (style)
Defines default styling for columns created by the codeblock.
When you use the columns codeblock, the following SCSS is applied:
.markdown .platen-columns {
margin-left: -$padding-large;
margin-right: -$padding-large;
flex-direction: column;
@media (min-width:56rem) {
flex-direction: row;
}
>div {
margin: $padding-large 0;
min-width: $body-min-width / 2;
padding: 0 $padding-large;
}
&.no-flatten-in-mobile {
@media (min-width:56rem) {
flex-direction: column;
}
}
}The content is placed in a div with the platen-columns, flex, and classes. Each column’s
content is then placed in another div with the flex-even and markdown-inner classes.
By default, this style:
- Sets the outer container’s horizontal margins to the negative value of
$padding-large - Sets the
flex-directionto column, ensuring the child divs are rendered as columns instead of rows. On smaller screens, like phones, it sets theflex-directionto row for readability. - Sets each column to have a vertical margin and horizontal padding to
$padding-large, and sets the minimum width to half the value of$body-min-width.
If the no-flatten-in-mobile class is added to the columns codeblock, it keeps the
flex-direction as column even on smaller screens.
You can overwrite this definition for your own site or theme by creating the file
styles/markup/_columns.scss in your assets folder, which defaults to assets in
your project root.
You can also create a new style module in the styles/markup folder and set this value to
that module’s name. If you do, omit the leading _ and trailing .scss. For example, the
name for the style module assets/styles/markup/_foo.scss is foo.
Note that if you override the style module or this setting,you entirely overwrite the default from the theme.
For more information on authoring SCSS, see the learning guide.
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 IDheading, processed for headingsimage, processed for image linkslink, 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.
Codeblock Render Hook Partial (codeblock)
Adds support for rendering codeblocks as columns in Platen. This render hook is only
called if the language ID for the codeblock (i.e. ```languageID) is
columns. If a codeblock does include the language ID, the renderer looks for any
nested codeblocks with the column language ID to render as columns in a shared
group.
For more information about how to use this render partial, see the reference documentation for this render hook.
For more information about defining codeblock render hook partials, see Defining a Codeblock Render Hook Partial in the Theme Guide.