Skip to content

Untitled draft #6284

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

Closed
rasika-2803 wants to merge 1 commit into from
Closed

Untitled draft #6284

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
32 changes: 14 additions & 18 deletions create/code.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
---
title: "Format code"
title: "Format code1"
description: "Format code in your documentation with syntax highlighting, line numbers, diffs, copy buttons, and interactive code group features in MDX."
keywords: ["code blocks", "syntax highlighting", "code styling"]
---
Expand Down Expand Up @@ -143,7 +143,6 @@ class HelloWorld {
}
}
```

</Accordion>

### Twoslash
Expand All @@ -152,7 +151,7 @@ In JavaScript and TypeScript code blocks, use `twoslash` to enable interactive t

<CodeGroup>

```ts twoslash Twoslash example
```ts Twoslash example twoslash
type Pet = "cat" | "dog" | "hamster";

function adoptPet(name: string, type: Pet) {
Expand Down Expand Up @@ -235,7 +234,7 @@ Highlight specific lines in your code blocks using `highlight` with the line num

<CodeGroup>

```javascript Line highlighting example {1,2,5}
```javascript Line highlighting example highlight={1-2,5}
const greeting = "Hello, World!";
function sayHello() {
console.log(greeting);
Expand All @@ -261,7 +260,7 @@ Focus on specific lines in your code blocks using `focus` with line numbers or r

<CodeGroup>

```javascript Line focusing example focus=2,4,5
```javascript Line focusing example focus={2,4-5}
const greeting = "Hello, World!";
function sayHello() {
console.log(greeting);
Expand Down Expand Up @@ -454,9 +453,9 @@ Add `[!code ++]` or `[!code --]` inside a comment at the end of a line to mark i

| Language | Added | Removed |
| --- | --- | --- |
| JavaScript, TypeScript, Java, C, C++, Go, Rust | `// [!code ++]` | `// [!code --]` |
| JavaScript, TypeScript, Java, C, C\+\+, Go, Rust | `// [!code ++]` | `// [!code --]` |
| Python, Ruby, Bash, YAML | `# [!code ++]` | `# [!code --]` |
| HTML, XML | `<!-- [!code ++] -->` | `<!-- [!code --] -->` |
| HTML, XML | `{/* [!code ++] */}` | `{/* [!code --] */}` |
| CSS | `/* [!code ++] */` | `/* [!code --] */` |
| SQL, Lua | `-- [!code ++]` | `-- [!code --]` |

Expand All @@ -478,8 +477,8 @@ sayHello();

```python Python diff lines
def greet():
print("Hello, World!") # [!code --]
print("Hello, Mintlify!") # [!code ++]
print("Hello, World!") # [!code --]
print("Hello, Mintlify!") # [!code ++]

greet()
```
Expand All @@ -498,8 +497,8 @@ sayHello();
````text Python format
```python Python diff lines
def greet():
print("Hello, World!") # [!code --]
print("Hello, Mintlify!") # [!code ++]
print("Hello, World!") // [!code --]
print("Hello, Mintlify!") // [!code ++]

greet()
```
Expand All @@ -522,8 +521,7 @@ Use the `<CodeBlock>` component in custom React components to programmatically r
</ResponseField>

<ResponseField name="icon" type="string">
The icon to display in the code block header. See [Icons](/components/icons)
for available options.
The icon to display in the code block header. See [Icons](/components/icons) for available options.
</ResponseField>

<ResponseField name="lines" type="boolean">
Expand All @@ -539,13 +537,11 @@ Use the `<CodeBlock>` component in custom React components to programmatically r
</ResponseField>

<ResponseField name="highlight" type="string">
The lines to highlight. Provide a stringified array of numbers. Example:
`"[1,3,4,5]"`.
The lines to highlight. Provide a stringified array of numbers. Example: `"[1,3,4,5]"`.
</ResponseField>

<ResponseField name="focus" type="string">
The lines to focus on. Provide a stringified array of numbers. Example:
`"[1,3,4,5]"`.
The lines to focus on. Provide a stringified array of numbers. Example: `"[1,3,4,5]"`.
</ResponseField>

### Example
Expand All @@ -570,4 +566,4 @@ export const CustomCodeBlock = ({
</CodeBlock>
);
};
```
```
Loading