<commit_before>> Specimens are the core of Catalog: they help you present your content.

### Using Specimens

#### Markdown

Specimens are defined as Markdown code blocks with an option string.

````code
```html|dark
Content goes here...
```
````

The format of the code block option string is as follows: `specimen-type|option1,option2`. 
_Note that no spaces are allowed._

#### React

When you use Catalog in React, specimen options are simply passed as props to the specimen component.

```code|lang-jsx
<HtmlSpecimen dark>
  Content goes here...
</HtmlSpecimen>
```

### Specimen Type

The first part – the one before the `|`-character – is the specimen __type__. The available types are described below.

For example:

````code
```image
...
```
````

### Specimen Options

The second part after the `|` is a list of comma-separated __options__ for the specimen. This second part is optional, so both of the following are valid option strings: `html` and `html|dark`.

For example:

````code
```code|lang-jsx,span-3
...
```
````

```hint
Specimen options may be removed from future versions of Catalog. We recommend that you use __props__ instead because they allow much more flexibility (see following section).
```

### Specimen Content

The content is what is written between the opening and closing triple-backticks ` ``` `. There are two types of content:

#### Strings

The [HTML](#/html), [Code](#/code), and [Hint](#/hint) specimens take a simple string as content which will be rendered according to the specimen type.

For example:

````code
```html
<p>Some HTML</p>
```
````

#### Props

Other specimens (like [Color](#/color)) take structured content as input which is defined by __props__. This content can be written in YAML or JSON syntax.

For example:

````code
```color
name: Red
value: #f00
```
````

#### Props and Content

To specify __props__ and __content__ together, separate them with `---` followed by a newline.

For example:

````code
```code
span: 2
---
<div>Hello</div>
```
````

````code
```code
span: 2
---
<div>Hello</div>
```
````

#### Documentation conventions

The documentation displays options in a list, using the following pattern:

- __`option: type`__ Option is the name, and type defines the expected type.
- __`src: string`__ Bold options/properties indicate that they are required to be defined
- `loop: boolean` while regular ones are always optional.

<commit_msg>Remove double example from docs<commit_after>> Specimens are the core of Catalog: they help you present your content.

### Using Specimens

#### Markdown

Specimens are defined as Markdown code blocks with an option string.

````code
```html|dark
Content goes here...
```
````

The format of the code block option string is as follows: `specimen-type|option1,option2`. 
_Note that no spaces are allowed._

#### React

When you use Catalog in React, specimen options are simply passed as props to the specimen component.

```code|lang-jsx
<HtmlSpecimen dark>
  Content goes here...
</HtmlSpecimen>
```

### Specimen Type

The first part – the one before the `|`-character – is the specimen __type__. The available types are described below.

For example:

````code
```image
...
```
````

### Specimen Options

The second part after the `|` is a list of comma-separated __options__ for the specimen. This second part is optional, so both of the following are valid option strings: `html` and `html|dark`.

For example:

````code
```code|lang-jsx,span-3
...
```
````

```hint
Specimen options may be removed from future versions of Catalog. We recommend that you use __props__ instead because they allow much more flexibility (see following section).
```

### Specimen Content

The content is what is written between the opening and closing triple-backticks ` ``` `. There are two types of content:

#### Strings

The [HTML](#/html), [Code](#/code), and [Hint](#/hint) specimens take a simple string as content which will be rendered according to the specimen type.

For example:

````code
```html
<p>Some HTML</p>
```
````

#### Props

Other specimens (like [Color](#/color)) take structured content as input which is defined by __props__. This content can be written in YAML or JSON syntax.

For example:

````code
```color
name: Red
value: #f00
```
````

#### Props and Content

To specify __props__ and __content__ together, separate them with `---` followed by a newline.

For example:

````code
```code
span: 2
---
<div>Hello</div>
```
````

#### Documentation conventions

The documentation displays options in a list, using the following pattern:

- __`option: type`__ Option is the name, and type defines the expected type.
- __`src: string`__ Bold options/properties indicate that they are required to be defined
- `loop: boolean` while regular ones are always optional.


{'fraction_non_alphanumeric': 0.12322768974145121, 'fraction_numerical': 0.0027105921601334446, 'mean_word_length': 4.33, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3070579', 'n_tokens_mistral': 1438, 'n_tokens_neox': 1330, 'n_words': 637}