---
title: "Add comments to code"
description: "Allow comment threads on inline code and code blocks by extending the Code and CodeBlock schemas."
canonical_url: "https://tiptap.dev/docs/comments/integrate/code"
---

# Add comments to code

Allow comment threads on inline code and code blocks by extending the Code and CodeBlock schemas.

To comment on inline code or text inside code blocks, extend the code extensions to allow the `inlineThread` mark from `CommentsKit`.

By default, `Code` excludes all other marks, and `CodeBlock` allows no marks. These rules remove comment anchors when you add comments to code or format commented text as code. See [issue #6398](https://github.com/ueberdosis/tiptap/issues/6398) for the reported behavior and maintainer guidance.

## Allow comments on inline code

Extend [Code](https://tiptap.dev/docs/editor/extensions/marks/code.md) with an empty `excludes` value so the code mark can coexist with `inlineThread`:

```js
import Code from '@tiptap/extension-code'

const CodeWithComments = Code.extend({
  excludes: '',
})
```

This also allows code to coexist with other marks, such as bold and italic. To keep those exclusions, set `excludes` to a space-separated list of the mark names you want to exclude. Leave `inlineThread` out of that list.

## Allow comments inside code blocks

Extend [CodeBlock](https://tiptap.dev/docs/editor/extensions/nodes/code-block.md) to allow `inlineThread` on its text:

```js
import CodeBlock from '@tiptap/extension-code-block'

const CodeBlockWithComments = CodeBlock.extend({
  marks: 'inlineThread',
})
```

This allows comment anchors while keeping other marks out of code blocks. If you use [CodeBlockLowlight](https://tiptap.dev/docs/editor/extensions/nodes/code-block-lowlight.md), apply the same `marks: 'inlineThread'` override to that extension instead.

## Register the extended extensions

If you use [StarterKit](https://tiptap.dev/docs/editor/extensions/functionality/starterkit.md), disable its built-in `Code` and `CodeBlock` extensions before registering your replacements:

```js
import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { CommentsKit } from '@tiptap-pro/extension-comments'

const editor = new Editor({
  extensions: [
    StarterKit.configure({
      code: false,
      codeBlock: false,
    }),
    CodeWithComments,
    CodeBlockWithComments,
    CommentsKit.configure({
      provider: collabProvider,
    }),
  ],
})
```

Use your existing `TiptapCollabProvider` instance as `collabProvider`. Keep the collaboration setup from the [installation guide](https://tiptap.dev/docs/comments/getting-started/install.md).

Apply the same schema overrides on every collaborating client. Then use the usual [`setThread` command](https://tiptap.dev/docs/comments/integrate/editor-commands.md#setthread-content-data-commentdata) to comment on selected code. The overrides preserve comment anchors when you format commented text as code, but they do not restore threads already deleted under the default schema.