请原谅我，这可能是重复的，但我不确定再搜索什么，因为我没有得到任何错误代码。

我想使用javascript实现以下代码示例中的文本高亮显示：

https://www.the-art-of-web.com/javascript/search-highlight/#box1

为此，我在我的第一个自定义插件上做了一次痛苦的尝试：

<?php
/*
Plugin Name: InPage-Search-Highlight
Plugin URI:  http://link to your plugin homepage
Description: Highlights all occurences of a search term within the same page.
Version:     1.0
Author:      morph3us - based off of https://www.the-art-of-web.com/javascript/search-highlight/
Author URI:  http://www.morph3us.net
License:     CC0
*/

function inpage_search_highlight() {
    $pluginurl = plugins_url(\'/inpage-search-highlight/js/hilitor.js\');

    echo "<div class=\'inpage-search\' style=\'margin-top:300px\'>
        <script type=\'text/javascript\' src=\'{$pluginurl}\'></script>
        <script type=\'text/javascript\'>
          var myHilitor = new Hilitor(\'page-template\'); // id of the element to parse
          myHilitor.apply(\'highlight words\');
        </script>
    </div>";
}

add_shortcode(\'inpage_search_highlight\', \'inpage_search_highlight\');
?>

显然，我还添加了一个名为“quot；js“；和一个名为；hilitor。js"；。在后者中，我从网站上复制了代码。

echo的内容在chrome开发者工具中可见，但实际页面上没有搜索框。

编辑故事的寓意：我确实初始化了Javascript，但没有提供任何UI来调用它们。对我来说，有太多的新东西，以至于我忽略了显而易见的东西。

我被网络教程艺术中的措辞误导了。因为第2段的标题是；如何实施；，我认为这将是整个整合，它可能应该更具体地称为；如何初始化highlitor类“；或者别的什么。

在第5节中，有一个示例很容易实现，并且比我最初设想的效果更好。

谢谢你们的帮助，伙计们，你们真的让我重新思考了正确的事情！因此，代码中的工作回声部分是：

    echo "<div class=\'inpage-search\' style=\'margin-top:300px\'>
        <form>
            <p>Highlight keywords as you type: <input id=\'keywords\' size=\'24\'></p>
        </form>

        <script src=\'{$pluginurl}\'></script>
        <script>

          window.addEventListener(\'DOMContentLoaded\', function(e) {
            var myHilitor2 = new Hilitor(\'playground\');
            myHilitor2.setMatchType(\'left\');
            document.getElementById(\'keywords\').addEventListener(\'keyup\', function(e) {
              myHilitor2.apply(this.value);
            }, false);
          }, false);

        </script>   
    </div>";

<form method="GET" action="/javascript/search-highlight/" onsubmit="myHilitor.apply(hilite.value); return false;">
<fieldset>
<legend>Highlight Words</legend>
<label>Keywords</label><span><input type="text" size="32" name="hilite" value="search engine keywords">
<input type="submit" value="Apply">
<input type="button" value="Remove" onclick="myHilitor.remove();"></span>
</fieldset>
</form>