Атрибут spellcheck тега <code>
Описание
Атрибут spellcheck управляет проверкой орфографии для редактируемого содержимого внутри тега <code>. Этот атрибут особенно полезен при работе с интерактивными редакторами кода.
<code contenteditable="true" spellcheck="false">
// Отключена проверка орфографии для кода
const méssage = "Hello"; // Опечатка не будет подчеркнута
</code>
<code contenteditable="true" spellcheck="true">
// Включена проверка для комментариев
/* Здесь опечатки будут выделены */
</code>
Значения атрибута:
| Значение | Поведение | Рекомендуемый случай |
|---|---|---|
true |
Включает проверку орфографии | Для комментариев и строковых литералов |
false |
Отключает проверку орфографии | Для синтаксиса кода и идентификаторов |
| (не указан) | Наследует настройки родителя | Когда поведение должно соответствовать окружению |
Практические примеры:
<!-- Смешанное содержимое -->
<code contenteditable="true">
<span spellcheck="false">function héllo() {</span>
<span spellcheck="true"> // Французский комментарий avec des fautes</span>
<span spellcheck="false">}</span>
</code>
<!-- Динамическое управление -->
<button onclick="toggleSpellcheck()">Переключить проверку</button>
<code id="dynamic-spellcheck" contenteditable>Пример кода</code>
<script>
function toggleSpellcheck() {
const code = document.getElementById('dynamic-spellcheck');
code.spellcheck = !code.spellcheck;
}
</script>
Рекомендации по использованию:
- Всегда отключайте для синтаксиса:
spellcheck="false" - Включайте для комментариев:
spellcheck="true" - Для строковых литералов выбирайте значение в зависимости от контекста
- Сочетайте с атрибутом
langдля многоязычных комментариев
Ограничения и особенности:
- Работает только с
contenteditable="true" - Поведение может различаться в браузерах
- Не влияет на статическое содержимое
- Пользователь может переопределить в настройках браузера
Интеграция с библиотеками подсветки:
<!-- Пример для Prism.js -->
<pre><code class="language-javascript" contenteditable spellcheck="false">
// Код с отключенной проверкой
const str = "Mispeled string"; // Не будет подчеркнуто
</code></pre>
<script>
Prism.highlightAll();
</script>
Примечание: Хотя атрибут spellcheck не является стандартизированным в HTML5, он поддерживается всеми современными браузерами. Для профессиональных редакторов кода лучше использовать специализированные решения с более тонким контролем проверки орфографии.