---
title: "Code Sample plugin"
description: "Insert and embed syntax highlighted code snippets."
canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/codesample/"
md_url: "https://www.tiny.cloud/docs/tinymce/latest/codesample/index.md"
version: "latest"
last_updated: "2026-03-09T01:59:33Z"
tokens: 1293
---
# Code Sample plugin

The Code Sample plugin (`codesample`) lets a user insert and embed syntax color highlighted code snippets into the editable area. It also adds a button to the toolbar which on click will open a dialog box to accept raw code input.

## Basic setup

```js
tinymce.init({
  selector: 'textarea',  // change this value according to your HTML
  plugins: 'codesample',
  toolbar: 'codesample'
});
```

> **Note:** For information on bundling this plugin with module bundlers, see [Bundling TinyMCE - Overview](../bundling-guide/).
By default, `codesample` uses `http://prismjs.com/` to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules.

> **Note:** Prism.js and prism.css need to be added to a page for syntax highlighting to work. See the instructions below to learn how to do this.

## Using Prism.js on your web page

You need to add `prism.js` and `prism.css` to your page in order to get the syntax highlighted code samples on your webpage (as created by the Code Sample plugin). The Code Sample plugin uses the following languages: markup, javascript, css, php, ruby, python, java, c, csharp and cpp. You can generate the `prism.js` and `prism.css` files on the [download](http://prismjs.com/download.html) page at the Prism website.

### Example of using the Prism.js script

```html
<link rel="stylesheet" type="text/css" href="prism.css">
<script src="prism.js"></script>
<pre class="language-markup"><code>...</code></pre>
```

## Interactive example

**Example**

```js
tinymce.init({
  selector: 'textarea#codesample',
  height: 500,
  plugins: 'codesample code',
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'PHP', value: 'php' },
    { text: 'Ruby', value: 'ruby' },
    { text: 'Python', value: 'python' },
    { text: 'Java', value: 'java' },
    { text: 'C', value: 'c' },
    { text: 'C#', value: 'csharp' },
    { text: 'C++', value: 'cpp' }
  ],
  toolbar: 'codesample code',
  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:16px }'
});
```

## Options

### `codesample_global_prismjs`

This configuration option allows a global Prism.js version to be used when highlighting code sample blocks, instead of using the Prism.js version bundled inside the `codesample` plugin. This allows for a custom version of Prism.js, including additional languages, to be used.

When using this option, ensure that Prism.js and any language add-ons are loaded on the site, alongside the TinyMCE script:

```html
<script src="prism.js" data-manual></script>
<script src="tinymce.js"></script>
```
**Type:** `Boolean`

**Default value:** `false`

**Possible values:** `true`, `false`

#### Example: using `codesample_global_prismjs`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'codesample',
  toolbar: 'codesample',
  codesample_global_prismjs: true
});
```

### `codesample_languages`

This configuration option enables you to set a list of languages to be displayed in the languages drop down.

#### Example: using `codesample_languages`

```js
tinymce.init({
  selector: 'textarea',
  plugins: 'codesample',
  codesample_languages: [
    { text: 'HTML/XML', value: 'markup' },
    { text: 'JavaScript', value: 'javascript' },
    { text: 'CSS', value: 'css' },
    { text: 'PHP', value: 'php' },
    { text: 'Ruby', value: 'ruby' },
    { text: 'Python', value: 'python' },
    { text: 'Java', value: 'java' },
    { text: 'C', value: 'c' },
    { text: 'C#', value: 'csharp' },
    { text: 'C++', value: 'cpp' }
  ],
  toolbar: 'codesample'
});
```

## Toolbar buttons

The Code Sample plugin provides the following toolbar buttons:

| Toolbar button identifier | Description |
| --- | --- |
| `codesample` | Inserts code snippets with syntax highlighting. |

These toolbar buttons can be added to the editor using:

- The [`toolbar`](../toolbar-configuration-options/#toolbar) configuration option.
- The [`quickbars_insert_toolbar`](../quickbars/#quickbars_insert_toolbar) configuration option.
- [Custom Context toolbars](../contexttoolbar/).

## Menu items

The Code Sample plugin provides the following menu items:

| Menu item identifier | [Default Menu Location](../menus-configuration-options/#example-the-tinymce-default-menu-items) | Description |
| --- | --- | --- |
| `codesample` | Insert | Inserts code snippets with syntax highlighting. |

These menu items can be added to the editor using:

- The [`menu`](../menus-configuration-options/#menu) configuration option.
- The [`contextmenu`](../menus-configuration-options/#contextmenu) configuration option.
- [Custom Menu toolbar buttons](../custom-menu-toolbar-button/).

## Commands

The Code Sample plugin provides the following TinyMCE command.

| Command | Description |
| --- | --- |
| CodeSample | Opens the Code Sample dialog at the cursor position or converts the current selection to a `<code>` block. |

Example
```js
tinymce.activeEditor.execCommand('CodeSample');
```