docs: Shiki transforms code on its own terms
Open, Needs TriagePublic
Actions

Assigned To

None

Authored By

	Volker_E
	Feb 22 2023, 3:21 PM

Description

Status

Shiki seems to transform code on its own terms, to its own rules

Example 'icon.md'

@import ( reference ) '@wikimedia/codex/mixins/css-icon.less';

.cdx-demo-css-icon {
	&--tag {
		.cdx-mixin-css-icon( @cdx-icon-tag );
	}

	&--map-pin {
		.cdx-mixin-css-icon( @cdx-icon-map-pin );
	}
}

@import (reference) "@wikimedia/codex/mixins/css-icon.less";

.cdx-demo-css-icon {
  &--tag {
    .cdx-mixin-css-icon(@cdx-icon-tag);
  }

  &--map-pin {
    .cdx-mixin-css-icon(@cdx-icon-map-pin);
  }
}

Goal

To make it simpler for Wikiverse developers to work with our code examples, the code should be presented in Wikimedia coding style.

Related Objects

Mentioned In: T324375: docs: Provide code samples that work in MediaWiki

Event Timeline

Volker_E created this task.Feb 22 2023, 3:21 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 22 2023, 3:21 PM

AnneT moved this task from Inbox to Codex Adoption on the Codex board.Feb 22 2023, 9:08 PM

Volker_E mentioned this in T324375: docs: Provide code samples that work in MediaWiki.Feb 23 2023, 11:11 AM

Catrope renamed this task from docs: Prism transforms code on its own terms to docs: Shiki transforms code on its own terms.Feb 24 2023, 4:13 AM

Catrope updated the task description. (Show Details)

It looks like this only happens when code is wrapped in a ```less or ```css block. The formatter for ```vue is much less opinionated, and just breaks lines that are too long.

ldelench_wmf moved this task from Inbox to Backlog on the Design-System-Team board.Mar 3 2023, 9:13 PM

docs: Shiki transforms code on its own termsOpen, Needs TriagePublicActions