![Code field javascript autocomplete](https://nystudio107.com/img/plugins/code-field/_1200x630_crop_center-center_82_line/code-field-javascript-autocomplete.png)
Link A Code field type
Code Field is a Craft CMS field type that uses the craft-code-editor package to provide a modern code editor for content authors.
Code Field uses the Monaco editor that leverages the same core code that the popular VS Code editor uses.
Link Themes & Code
That means it provides code highlighting, syntax checking, and autocompletion for over 80 languages.
It also has light, dark, and high contrast themes that can be chosen on a per-field basis.
![Code field css picker](https://nystudio107.com/img/plugins/code-field/_1200x799_crop_center-center_82_line/code-field-css-picker.png 1200w, https://nystudio107.com/img/plugins/code-field/_992x558_crop_center-center_60_line/code-field-css-picker.png 992w, https://nystudio107.com/img/plugins/code-field/_768x432_crop_center-center_60_line/code-field-css-picker.png 768w, https://nystudio107.com/img/plugins/code-field/_576x383_crop_center-center_82_line/code-field-css-picker.png 576w, https://nystudio107.com/img/plugins/code-field/_1152x767_crop_center-center_82_line/code-field-css-picker.png 1152w, https://nystudio107.com/img/plugins/code-field/_496x279_crop_center-center_60_line/code-field-css-picker.png 496w, https://nystudio107.com/img/plugins/code-field/_384x216_crop_center-center_60_line/code-field-css-picker.png 384w)
![Code field settings](https://nystudio107.com/img/plugins/code-field/_1200x796_crop_center-center_82_line/code-field-settings.png 1200w, https://nystudio107.com/img/plugins/code-field/_992x558_crop_center-center_60_line/code-field-settings.png 992w, https://nystudio107.com/img/plugins/code-field/_1984x1317_crop_center-center_82_line/code-field-settings.png 1984w, https://nystudio107.com/img/plugins/code-field/_768x432_crop_center-center_60_line/code-field-settings.png 768w, https://nystudio107.com/img/plugins/code-field/_1536x1020_crop_center-center_82_line/41904/code-field-settings.jpg 1536w, https://nystudio107.com/img/plugins/code-field/_576x382_crop_center-center_82_line/code-field-settings.png 576w, https://nystudio107.com/img/plugins/code-field/_1152x765_crop_center-center_82_line/code-field-settings.png 1152w, https://nystudio107.com/img/plugins/code-field/_496x279_crop_center-center_60_line/code-field-settings.png 496w, https://nystudio107.com/img/plugins/code-field/_384x216_crop_center-center_60_line/code-field-settings.png 384w)
Link Options Galore
It also sports as a variety of editor options such as font size, line numbers, code folding, and more.