Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: mention that the user is responsible for adding transformer classes css #612

Merged
merged 3 commits into from
Mar 6, 2024
Merged

docs: mention that the user is responsible for adding transformer classes css #612

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c7d4621
docs: explicitly mention that the user is in charge of adding for cla…
francisko-rezende Mar 5, 2024
9ddc6bf
fixchore: fix lint errors
francisko-rezende Mar 5, 2024
dc56dc5
Update docs/packages/transformers.md
antfu Mar 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 39 additions & 11 deletions docs/packages/transformers.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,8 @@ const html = await codeToHtml(code, {

## Transformers

Transformers add specific CSS classes to relevant tags but do not come with styles, you might want to provide your own CSS rules to style them properly.

### `transformerNotationDiff`

Use `[!code ++]` and `[!code --]` to mark added and removed lines.
Expand All @@ -51,7 +53,9 @@ export function foo() {
```
````

will be transformed to
Render the tag `pre` with the class `has-diff`, and `span` tags for the marked lines with the classes `diff` and either `add` for `// [\!code ++]` or `remove` for `// [\!code --]`.

With some CSS, you can make it look like this:

```ts
export function foo() {
Expand Down Expand Up @@ -86,7 +90,9 @@ export function foo() {

### `transformerNotationHighlight`

Use `[!code highlight]` to highlight a line (adding `highlighted` class).
Use `[!code highlight]` to highlight a line.

For example, the following code:

````md
```ts
Expand All @@ -96,7 +102,9 @@ export function foo() {
```
````

Results in
Render the tag `pre` and and the `span` tag for the line marked with `// [\!code highlight]` with the class `highlighted`.

With some CSS, you can make it look like this:

```ts
export function foo() {
Expand All @@ -110,7 +118,9 @@ Alternatively, you can use the [`transformerMetaHighlight`](#transformermetahigh

### `transformerNotationWordHighlight`

Use `[!code word:xxx]` to highlight a word (adding `highlighted-word` class).
Use `[!code word:xxx]` to highlight a word.

For example, the following code:

````md
```ts
Expand All @@ -121,7 +131,9 @@ export function foo() { // [\!code word:Hello]
```
````

Results in
Render the `span` for the the word "Hello" with the class `highlighted-word`.

With some CSS, you can make it look like this:

```ts
export function foo() { // [!code word:Hello]
Expand Down Expand Up @@ -152,7 +164,9 @@ console.log(options.foo) // this one will not be highlighted

### `transformerNotationFocus`

Use `[!code focus]` to focus a line (adding `focused` class).
Use `[!code focus]` to focus a line.

For example, the following code:

````md
```ts
Expand All @@ -162,7 +176,9 @@ export function foo() {
```
````

Results in
Render the tag `pre` with the class `has-focused-lines`, and `span` lines marked with `// [\!code focus]` the class `has-focus`.

With some CSS, you can make it look like this:

```ts
export function foo() {
Expand All @@ -174,7 +190,9 @@ export function foo() {

### `transformerNotationErrorLevel`

Use `[!code error]`, `[!code warning]`, to mark a line with an error level (adding `highlighted error`, `highlighted warning` class).
Use `[!code error]`, `[!code warning]`, to mark a line with an error level.

For example, the following code:

````md
```ts
Expand All @@ -185,7 +203,9 @@ export function foo() {
```
````

Results in
Render the tag `pre` with the class `has-highlighted`, and the `span` tags for the marked lines with the classes `highlighted` and either `error` for `// [\!code error]` or `warning` for `// [\!code warning]`.

With some CSS, you can make it look like this:

```ts
export function foo() {
Expand Down Expand Up @@ -236,6 +256,8 @@ With some CSS, you can make it look like this:

Highlight lines based on the meta string provided on the code snippet. Requires integrations supports.

For example, the following code:

````md
```js {1,3-4}
console.log('1')
Expand All @@ -245,7 +267,9 @@ console.log('4')
```
````

Results in
Render the informed `span` lines with the class `highlighted`.

With some CSS, you can make it look like this:

```js {1,3-4}
console.log('1')
Expand All @@ -258,6 +282,8 @@ console.log('4')

Highlight words based on the meta string provided on the code snippet. Requires integrations supports.

For example, the following code:

````md
```js /Hello/
const msg = 'Hello World'
Expand All @@ -266,7 +292,9 @@ console.log(msg) // prints Hello World
```
````

Results in
Render the `span` tags for the informed word class `highlighted-word`.

With some CSS, you can make it look like this:

```js /Hello/
const msg = 'Hello World'
Expand Down
Loading