如何为ipywidgets.Textarea实现语法高亮？

最省心的方案：替换为ipywidgets.Code组件 #

原生ipywidgets.Textarea本身不带语法高亮功能，但官方提供了专门的Code组件，它内置了语法高亮支持，用法和Textarea几乎一致，这是最简便的解决方案。

示例代码：

import ipywidgets as widgets

# 创建支持Python语法高亮的代码输入框
code_input = widgets.Code(
    value="""def calculate_sum(a, b):
    return a + b

result = calculate_sum(5, 3)
print(result)""",
    language='python',  # 指定编程语言，支持python、javascript、html等多种类型
    layout={'height': '250px', 'width': '100%'}
)
code_input

这个组件会自动处理语法高亮，不需要额外依赖或配置，输入体验和Textarea一致，还支持代码折叠等额外功能。

原生Textarea改造方案（适合必须用Textarea的场景） #

如果因为业务需求必须使用原生Textarea，可以通过自定义JavaScript逻辑实现基础语法高亮，无需依赖外部链接：

1. 先创建Textarea组件：

import ipywidgets as widgets
from IPython.display import display, HTML

textarea = widgets.Textarea(
    value="""def hello():
    print("Hi there!")""",
    layout={'height': '250px', 'width': '100%'}
)
display(textarea)

2. 添加自定义高亮逻辑：

# 内嵌高亮样式和核心逻辑
display(HTML("""
<style>
/* 自定义高亮样式 */
.hljs-keyword { color: #0000ff; font-weight: bold; }
.hljs-function { color: #007020; }
.hljs-string { color: #a31515; }
</style>

<script>
// 简化的Python语法高亮匹配逻辑
function highlightCode(code) {
    // 匹配关键字、函数、字符串
    code = code.replace(/(def|return|print|if|else)/g, '<span class="hljs-keyword">$1</span>');
    code = code.replace(/(".*?"|'.*?')/g, '<span class="hljs-string">$1</span>');
    code = code.replace(/(\w+)(?=\()/g, '<span class="hljs-function">$1</span>');
    return code;
}

const textarea = document.querySelector('.widget-textarea textarea');
// 创建覆盖层显示高亮内容
const overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.top = textarea.offsetTop + 'px';
overlay.style.left = textarea.offsetLeft + 'px';
overlay.style.width = textarea.style.width;
overlay.style.height = textarea.style.height;
overlay.style.padding = getComputedStyle(textarea).padding;
overlay.style.border = getComputedStyle(textarea).border;
overlay.style.background = 'white';
overlay.style.whiteSpace = 'pre-wrap';
overlay.style.overflow = 'auto';
textarea.parentNode.appendChild(overlay);

// 同步内容和滚动
function updateHighlight() {
    overlay.innerHTML = highlightCode(textarea.value);
    textarea.style.color = 'transparent';
    textarea.style.background = 'transparent';
}

updateHighlight();
textarea.addEventListener('input', updateHighlight);
textarea.addEventListener('scroll', () => {
    overlay.scrollTop = textarea.scrollTop;
    overlay.scrollLeft = textarea.scrollLeft;
});
</script>
"""))

这种方法通过覆盖层模拟高亮效果，输入仍在原生Textarea中，适合简单语法场景；复杂语法需要扩展匹配规则或内嵌完整的高亮库代码。

总结：优先选择ipywidgets.Code组件，它是官方提供的稳定方案；必须用Textarea时再考虑自定义高亮逻辑。

内容的提问来源于stack exchange，提问作者MemoryWrangler