请你实现一个js要求输入一个pre代码块时给其中的代码添加点击效果点击一个代码单词就会将这个代码块中的其它单词标出

以下是一个简单的实现，通过给代码块中的每个单词添加点击事件，点击时将该单词标记出来：

<!DOCTYPE html>
<html>
<head>
    <title>Code Highlight</title>
    <style>
        .highlight {
            background-color: yellow;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <pre id="codeBlock">
        <code>
            // 这是一段示例代码
            function add(a, b) {
                return a + b;
            }
        </code>
    </pre>

    <script>
        var codeBlock = document.getElementById('codeBlock');

        codeBlock.addEventListener('click', function(event) {
            var target = event.target;

            if (target.nodeName === 'CODE') {
                var words = target.innerText.split(' ');

                for (var i = 0; i < words.length; i++) {
                    var word = words[i];
                    var span = document.createElement('span');
                    span.innerText = word + ' ';
                    span.addEventListener('click', function() {
                        this.classList.toggle('highlight');
                    });
                    target.replaceChild(span, target.childNodes[i]);
                }
            }
        });
    </script>
</body>
</html>

运行以上代码后，点击代码块中的单词，该单词会被标记为黄色背景。点击已标记的单词可以取消标记效果

请你实现一个js要求输入一个pre代码块时给其中的代码添加点击效果点击一个代码单词就会将这个代码块中的其它单词标出