{"id":2704,"date":"2019-06-03T16:28:20","date_gmt":"2019-06-03T21:28:20","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=2704"},"modified":"2019-06-03T16:28:22","modified_gmt":"2019-06-03T21:28:22","slug":"wordpress-how-to-change-the-enlighter-js-line-highlight-color","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2019\/06\/03\/wordpress-how-to-change-the-enlighter-js-line-highlight-color\/","title":{"rendered":"WordPress: How to change the Enlighter.js line highlight color"},"content":{"rendered":"\n<p>When I recently updated WordPress, I noticed that my Enlighter.js line hover color changed back to default yellow from the color I had changed it to originally. <\/p>\n\n\n\n<p>For example:<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"500\" height=\"186\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image.png\" alt=\"\" class=\"wp-image-2705\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image.png 500w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-300x112.png 300w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p>Since I had to look up how to change this color back to blue, I decided I would create a post here about how to do it for future reference. <\/p>\n\n\n\n<p>The CSS lines that Enlighter.js is using to make this yellow line highlight color are:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ol.enlighterEnlighterJS.hoverEnabled li:hover,\nul.enlighterEnlighterJS.hoverEnabled li:hover {\n    background-color: #fffcd3;\n    border: 0 solid #fff;\n    color: #444\n}<\/pre>\n\n\n\n<p>To change this from yellow <code>#fffcd3<\/code> to light blue (<code>#d4fbff<\/code>), go to your WordPress dashboard and choose Appearance &#8211;> Customize.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"191\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-1.png\" alt=\"\" class=\"wp-image-2708\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-1.png 320w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-1-300x179.png 300w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<p>From there, choose &#8220;Additional CSS&#8221; and paste the following css into the box:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"css\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">ol.enlighterEnlighterJS.hoverEnabled li:hover,\nul.enlighterEnlighterJS.hoverEnabled li:hover {\n   background-color: #d4fbff;\n}<\/pre>\n\n\n\n<p>Once the CSS overwrite code is added, click the &#8220;Publish&#8221; button at the top of the dialog for the change to take effect on the site.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"755\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-2.png\" alt=\"\" class=\"wp-image-2710\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-2.png 300w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-2-119x300.png 119w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\n\n\n\n<p>With this CSS change published, I now see a light blue highlight color when hovering over lines of code in Enlighter.js code boxes. <\/p>\n\n\n\n<figure class=\"wp-block-image\"><img loading=\"lazy\" decoding=\"async\" width=\"654\" height=\"203\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-3.png\" alt=\"\" class=\"wp-image-2711\" srcset=\"https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-3.png 654w, https:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2019\/06\/image-3-300x93.png 300w\" sizes=\"auto, (max-width: 654px) 100vw, 654px\" \/><\/figure>\n\n\n\n<p>For more information about the Enlighter.js WordPress plugin, see:<br><a href=\"https:\/\/enlighterjs.org\/\">https:\/\/enlighterjs.org\/<\/a><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When I recently updated WordPress, I noticed that my Enlighter.js line hover color changed back to default yellow from the color I had changed it to originally. For example: Since I had to look up how to change this color back to blue, I decided I would create a post here about how to do &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2019\/06\/03\/wordpress-how-to-change-the-enlighter-js-line-highlight-color\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">WordPress: How to change the Enlighter.js line highlight color<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[10,11,9],"class_list":["post-2704","post","type-post","status-publish","format-standard","hentry","category-wordpress","tag-css","tag-enlighter","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2704","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=2704"}],"version-history":[{"count":4,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2704\/revisions"}],"predecessor-version":[{"id":2713,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/2704\/revisions\/2713"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=2704"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=2704"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=2704"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}