{"id":901,"date":"2024-09-19T10:14:07","date_gmt":"2024-09-19T09:14:07","guid":{"rendered":"http:\/\/ghanim-solution.de\/?p=901"},"modified":"2024-09-19T10:23:16","modified_gmt":"2024-09-19T09:23:16","slug":"syntax-highlighting-und-copy-code-funktionalitat-mit-highlight-js-und-javascript-in-wordpress-integrieren","status":"publish","type":"post","link":"https:\/\/ghanim-solution.de\/index.php\/2024\/09\/19\/syntax-highlighting-und-copy-code-funktionalitat-mit-highlight-js-und-javascript-in-wordpress-integrieren\/","title":{"rendered":"Syntax-Highlighting und &#8220;Copy Code&#8221;-Funktionalit\u00e4t mit Highlight.js und JavaScript in WordPress integrieren"},"content":{"rendered":"\n<p>In diesem Beitrag zeigen wir, wie du Syntax-Highlighting auf deinem WordPress-Blog mit <strong>Highlight.js<\/strong> einbindest und zus\u00e4tzlich eine praktische <strong>&#8220;Copy Code&#8221;-Schaltfl\u00e4che<\/strong> hinzuf\u00fcgst, um den Code aus einem Beitrag leicht kopieren zu k\u00f6nnen.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li class=\"has-large-font-size\">Highlight.js und CSS f\u00fcr Syntax-Highlighting einbinden<\/li>\n<\/ol>\n\n\n\n<pre><code class=\"language-php\">\n\/\/ Highlight.js und CSS f\u00fcr Syntax-Highlighting einbinden\nfunction enqueue_highlight_js() {\n    if (is_single()) { \/\/ Nur auf Einzelposts ausf\u00fchren\n        \/\/ Highlight.js JavaScript-Datei einbinden\n        wp_enqueue_script('highlight-js', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.3.1\/highlight.min.js', array(), null, true);\n        \n        \/\/ Highlight.js CSS-Datei f\u00fcr den Stil des Codes einbinden\n        wp_enqueue_style('highlight-css', 'https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.3.1\/styles\/default.min.css');\n    }\n}\nadd_action('wp_enqueue_scripts', 'enqueue_highlight_js');\n\n<\/code><\/pre>\n\n\n\n<p>Dieses Snippet l\u00e4dt die <strong>Highlight.js<\/strong>-Bibliothek sowie das dazugeh\u00f6rige Standard-CSS f\u00fcr das Syntax-Highlighting auf Einzelbeitr\u00e4gen (Posts) ein. Dies stellt sicher, dass der Code auf deiner Seite korrekt und in einem lesbaren Format dargestellt wird.<\/p>\n\n\n\n<p class=\"has-large-font-size\">2. Highlight.js initialisieren<\/p>\n\n\n\n<pre><code class=\"language-php\">\n\/\/ Highlight.js initialisieren\nfunction activate_highlight_js() {\n    if (is_single()) { \/\/ Nur auf Einzelposts ausf\u00fchren\n        echo '<script>document.addEventListener(\"DOMContentLoaded\", function() { hljs.highlightAll(); });<\/script>';\n    }\n}\nadd_action('wp_footer', 'activate_highlight_js');\n\n<\/code><\/pre>\n\n\n\n<p>Diese Funktion sorgt daf\u00fcr, dass <strong>Highlight.js<\/strong> nach dem Laden der Seite aktiviert wird. Hier wird ein JavaScript-Snippet in den Footer eingef\u00fcgt, das alle Codebl\u00f6cke auf der Seite automatisch hervorhebt.<\/p>\n\n\n\n<p class=\"has-large-font-size\">3. &#8220;Copy Code&#8221;-Schaltfl\u00e4che hinzuf\u00fcgen<\/p>\n\n\n\n<pre><code class=\"language-php\">\n\/\/ \"Copy Code\"-Schaltfl\u00e4che f\u00fcr Codebl\u00f6cke hinzuf\u00fcgen\nfunction enqueue_copy_code_script() {\n    \/\/ Eigenes JavaScript f\u00fcr die \"Copy\"-Schaltfl\u00e4che einbinden\n    wp_enqueue_script('copy-code-js', get_stylesheet_directory_uri() . '\/js\/copy-code.js', array(), null, true);\n}\nadd_action('wp_enqueue_scripts', 'enqueue_copy_code_script');\n<\/code><\/pre>\n\n\n\n<p>Hier wird ein <strong>JavaScript<\/strong>-Skript eingebunden, das die &#8220;Copy Code&#8221;-Schaltfl\u00e4che anzeigt. Diese Schaltfl\u00e4che erscheint bei jedem Codeblock und erm\u00f6glicht den Nutzern, den Code mit nur einem Klick in die Zwischenablage zu kopieren.<\/p>\n\n\n\n<p class=\"has-large-font-size\">4. JavaScript f\u00fcr die &#8220;Copy Code&#8221;-Schaltfl\u00e4che<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\ndocument.addEventListener('DOMContentLoaded', function() {\n    const codeBlocks = document.querySelectorAll('pre code');\n\n    codeBlocks.forEach(block => {\n        \/\/ \"Copy\"-Button erstellen\n        const copyButton = document.createElement('button');\n        copyButton.className = 'copy-button';\n        copyButton.innerHTML = '<i class=\"fas fa-clipboard\"><\/i> Copy'; \/\/ Clipboard Icon hinzuf\u00fcgen\n\n        \/\/ Button in den Codeblock integrieren\n        const container = document.createElement('div');\n        container.className = 'code-container';\n        block.parentNode.insertBefore(container, block);\n        container.appendChild(block);\n        container.appendChild(copyButton);\n\n        \/\/ Event-Listener f\u00fcr den \"Copy\"-Button\n        copyButton.addEventListener('click', function() {\n            const code = block.innerText;\n\n            \/\/ Code in die Zwischenablage kopieren\n            navigator.clipboard.writeText(code).then(function() {\n                \/\/ Schaltfl\u00e4che in \"Copied\" \u00e4ndern\n                copyButton.innerHTML = '&#10004; Copied!';\n                setTimeout(() => {\n                    copyButton.innerHTML = '<i class=\"fas fa-clipboard\"><\/i> Copy';\n                }, 2000);\n            }, function() {\n                console.error('Failed to copy text');\n            });\n        });\n    });\n});\n\n<\/code><\/pre>\n\n\n\n<p>Dieses JavaScript f\u00fcgt die <strong>&#8220;Copy&#8221;-Schaltfl\u00e4che<\/strong> zu jedem Codeblock auf der Seite hinzu. Wenn der Button angeklickt wird, wird der Code in die Zwischenablage kopiert und der Button zeigt vor\u00fcbergehend &#8220;Copied&#8221; an.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p>5. Testen im Frontend<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Erstelle einen Beitrag in WordPress<\/li>\n\n\n\n<li>F\u00fcge HTML-Code in den Beitrag ein indem du auf das das Plus-Symbol (+) ancklickst und das Element <strong>Custom  HTML<\/strong> ausw\u00e4hlst <\/li>\n\n\n\n<li>F\u00fcge den Code in den Code-Block ein, je nach verwendeter Programmiersprache.<\/li>\n<\/ol>\n\n\n\n<p>Zum Beispiel, wenn du JavaScript verwendest, f\u00fcge folgenden Code in den Code-Block ein:<\/p>\n\n\n\n<pre><code class=\"language-javascript\">\n&lt;pre&gt;&lt;code class=\"language-javascript\"&gt;\n\/\/ Beispiel JavaScript-Code\nfunction greet() {\n    console.log(&quot;Hallo Welt!&quot;);\n}\ngreet();\n&lt;\/code&gt;&lt;\/pre&gt;\n<\/code><\/pre>\n\n\n\n<p class=\"has-large-font-size\">Fazit<\/p>\n\n\n\n<p>Mit diesen Schritten hast du eine elegante M\u00f6glichkeit, <strong>Syntax-Highlighting<\/strong> und eine <strong>&#8220;Copy Code&#8221;-Funktion<\/strong> auf deiner WordPress-Seite zu implementieren. Besonders in technischen Blogs oder bei Tutorials ist dies eine n\u00fctzliche Erg\u00e4nzung f\u00fcr deine Leser.<\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In diesem Beitrag zeigen wir, wie du Syntax-Highlighting auf deinem WordPress-Blog mit Highlight.js einbindest und zus\u00e4tzlich eine praktische &#8220;Copy Code&#8221;-Schaltfl\u00e4che hinzuf\u00fcgst, um den Code aus einem Beitrag leicht kopieren zu k\u00f6nnen. \/\/ Highlight.js und CSS f\u00fcr Syntax-Highlighting einbinden function enqueue_highlight_js() { if (is_single()) { \/\/ Nur auf Einzelposts ausf\u00fchren \/\/ Highlight.js JavaScript-Datei einbinden wp_enqueue_script(&#8216;highlight-js&#8217;, &#8216;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/highlight.js\/11.3.1\/highlight.min.js&#8217;, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":902,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-901","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised"],"_links":{"self":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/901","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/comments?post=901"}],"version-history":[{"count":2,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/901\/revisions"}],"predecessor-version":[{"id":905,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/posts\/901\/revisions\/905"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media\/902"}],"wp:attachment":[{"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/media?parent=901"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/categories?post=901"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ghanim-solution.de\/index.php\/wp-json\/wp\/v2\/tags?post=901"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}