API tools faq
paste
Advertisement
Tibers

Highlightjs

Tibers
Nov 27th, 2024 (edited)
23
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.10 KB | Source Code | 0 0
raw download clone embed print report
  1. /*------------------------------------------------------------------------------------------------------------------------------------------------------------*/
  2. ---> Default code from /theme/content.css The code can be found at lines 856-869 in the text editor.
  3.  
  4. .postbody .content::-webkit-scrollbar,
  5. .topicreview::-webkit-scrollbar,
  6. .post_details::-webkit-scrollbar,
  7. .codebox code::-webkit-scrollbar,
  8. .attachbox dd::-webkit-scrollbar,
  9. .attach-image::-webkit-scrollbar,
  10. .dropdown-extended ul::-webkit-scrollbar {
  11. width: 8px;
  12. height: 8px;
  13. -webkit-appearance: none;
  14. background: rgba(0, 0, 0, .1);
  15. border-radius: 3px;
  16. }
  17.  
  18. .postbody .content::-webkit-scrollbar-thumb,
  19. .topicreview::-webkit-scrollbar-thumb,
  20. .post_details::-webkit-scrollbar-thumb,
  21. .codebox code::-webkit-scrollbar-thumb,
  22. .attachbox dd::-webkit-scrollbar-thumb,
  23. .attach-image::-webkit-scrollbar-thumb,
  24. .dropdown-extended ul::-webkit-scrollbar-thumb {
  25. background: rgba(0, 0, 0, .3);
  26. border-radius: 3px;
  27. }
  28. -----------------------------------------------------------------------
  29. // Removed from default code these two.
  30. .codebox code::-webkit-scrollbar
  31. .codebox code::-webkit-scrollbar-thumb
  32.  
  33. // we put these in /theme/content.css
  34. .postbody .content::-webkit-scrollbar,
  35. .topicreview::-webkit-scrollbar,
  36. .post_details::-webkit-scrollbar,
  37. .attachbox dd::-webkit-scrollbar,
  38. .attach-image::-webkit-scrollbar,
  39. .dropdown-extended ul::-webkit-scrollbar {
  40. width: 8px;
  41. height: 8px;
  42. -webkit-appearance: none;
  43. background: rgba(0, 0, 0, .1);
  44. border-radius: 3px;
  45. }
  46.  
  47. .postbody .content::-webkit-scrollbar-thumb,
  48. .topicreview::-webkit-scrollbar-thumb,
  49. .post_details::-webkit-scrollbar-thumb,
  50. .attachbox dd::-webkit-scrollbar-thumb,
  51. .attach-image::-webkit-scrollbar-thumb,
  52. .dropdown-extended ul::-webkit-scrollbar-thumb {
  53. background: rgba(0, 0, 0, .3);
  54. border-radius: 3px;
  55. }
  56. -----------------------------------------------------------------------
  57.  
  58. ---> Watch the video to see what I modify/remove from /theme/content.css and /theme/colours.css
  59.  
  60. ---> default code from /theme/content.css // The code can be found at lines 512-542 in the text editor.
  61.  
  62. /* Code block */
  63. .codebox {
  64. border: 1px solid transparent;
  65. font-size: 1em;
  66. margin: 1em 0 1.2em 0;
  67. word-wrap: normal;
  68. }
  69.  
  70. .codebox p {
  71. text-transform: uppercase;
  72. border-bottom: 1px solid transparent;
  73. margin-bottom: 0;
  74. padding: 3px;
  75. font-size: 0.8em !important;
  76. font-weight: bold;
  77. display: block;
  78. }
  79.  
  80. blockquote .codebox {
  81. margin-left: 0;
  82. }
  83.  
  84. .codebox code {
  85. overflow: auto;
  86. display: block;
  87. height: auto;
  88. max-height: 200px;
  89. padding: 5px 3px;
  90. font: 0.9em Monaco, "Andale Mono","Courier New", Courier, monospace;
  91. line-height: 1.3em;
  92. }
  93.  
  94. ---> default code from /theme/colours.css // The code can be found at lines 426-438 in the text editor.
  95.  
  96. /* Code block */
  97. .codebox {
  98. background-color: #FFFFFF;
  99. border-color: #C9D2D8;
  100. }
  101.  
  102. .codebox p {
  103. border-bottom-color: #CCCCCC;
  104. }
  105.  
  106. .codebox code {
  107. color: #2E8B57;
  108. }
  109.  
  110. ---> In the code below, I extracted the styles from the /theme/content.css and /theme/colours.css files and added them to custom.css to avoid overlapping with the default styles. I made a few minor modifications to the CSS, and for this video, I preferred to centralize them in custom.css
  111.  
  112. /* Code block styling */
  113. .codebox {
  114. background-color: #23241f;
  115. border: 1px solid #C9D2D8;
  116. overflow: hidden; /* Hides the default scrollbar */
  117. position: relative;
  118. margin: 1em 0 1.2em 0;
  119. font-size: 1em;
  120. }
  121.  
  122. blockquote .codebox {
  123. margin-left: 0;
  124. }
  125.  
  126. .codebox-header {
  127. background-color: #f5f5f5;
  128. padding: 8px;
  129. /* font-family: Arial, sans-serif; */
  130. font-size: 0.8em;
  131. text-transform: uppercase;
  132. }
  133.  
  134. .codebox-header p {
  135. margin: 0;
  136. }
  137.  
  138. .codebox-header a {
  139. color: #007bff;
  140. text-decoration: none;
  141. }
  142.  
  143. .codebox-header p a:first-of-type {
  144. margin-left: 5px; /* Adjust this value as needed */
  145. }
  146.  
  147. .codebox-header a:hover {
  148. text-decoration: underline;
  149. }
  150.  
  151. .codebox code {
  152. display: block;
  153. max-height: 200px; /* Limits height for scrolling */
  154. overflow-y: auto; /* Enables vertical scrolling */
  155. box-sizing: border-box;
  156. font: 0.9em Monaco, "Andale Mono", "Courier New", Courier, monospace;
  157. line-height: 1.3em;
  158. position: relative; /* Ensures it is positioned relative for overflow control */
  159. }
  160.  
  161. /* Allows full expansion for the custom scrollbar */
  162. .codebox.expanded code {
  163. max-height: none; /* Removes height limitation */
  164. overflow-y: auto; /* Enables custom vertical scrolling */
  165. }
  166.  
  167. /* Masks the white corner at the intersection of scrollbars */
  168. .codebox::after {
  169. content: "";
  170. position: absolute;
  171. bottom: 0;
  172. right: 0;
  173. width: 8px; /* Matches the width of the scrollbar */
  174. height: 8px; /* Matches the height of the scrollbar */
  175. background-color: #23241f; /* Matches the background of .codebox */
  176. }
  177.  
  178. /* These two rules are from the default content.css */
  179.  
  180. /* Custom scrollbar */
  181. .codebox code::-webkit-scrollbar {
  182. width: 8px; /* Scrollbar width */
  183. height: 8px;
  184. -webkit-appearance: none;
  185. background: transparent; /* Transparent background */
  186. }
  187.  
  188. .codebox code::-webkit-scrollbar-thumb {
  189. background: rgba(0, 0, 0, .3);
  190. border-radius: 3px;
  191. }
  192. -----------------------------------------------------------------------
  193. ---> Code from /template/forum_fn.js // The code can be found at lines 146-198 in the text editor.
  194. ---> This is the default java code for selecting the code:
  195.  
  196. function selectCode(a) {
  197. 'use strict';
  198.  
  199. // Get ID of code block
  200. var e = a.parentNode.parentNode.getElementsByTagName('CODE')[0];
  201. var s, r;
  202.  
  203. // Not IE and IE9+
  204. if (window.getSelection) {
  205. s = window.getSelection();
  206. // Safari and Chrome
  207. if (s.setBaseAndExtent) {
  208. var l = (e.innerText.length > 1) ? e.innerText.length - 1 : 1;
  209. try {
  210. s.setBaseAndExtent(e, 0, e, l);
  211. } catch (error) {
  212. r = document.createRange();
  213. r.selectNodeContents(e);
  214. s.removeAllRanges();
  215. s.addRange(r);
  216. }
  217. }
  218. // Firefox and Opera
  219. else {
  220. // workaround for bug # 42885
  221. if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) === '<BR>') {
  222. e.innerHTML = e.innerHTML + '&nbsp;';
  223. }
  224.  
  225. r = document.createRange();
  226. r.selectNodeContents(e);
  227. s.removeAllRanges();
  228. s.addRange(r);
  229. }
  230. }
  231. // Some older browsers
  232. else if (document.getSelection) {
  233. s = document.getSelection();
  234. r = document.createRange();
  235. r.selectNodeContents(e);
  236. s.removeAllRanges();
  237. s.addRange(r);
  238. }
  239. // IE
  240. else if (document.selection) {
  241. r = document.body.createTextRange();
  242. r.moveToElementText(e);
  243. r.select();
  244. }
  245. }
  246.  
  247. ---> replace the default code with the one below, because I added expand/collapse and the default code no longer worked to select the code.
  248. -----------------------------------------------------------------------
  249. ---> Use this code instead of the default one above.
  250.  
  251. function selectCode(a, event) {
  252. 'use strict';
  253.  
  254. // Prevent the default behavior of the link
  255. event.preventDefault();
  256.  
  257. // Get the CODE element within the respective block
  258. var e = a.parentNode.parentNode.parentNode.querySelector('code');
  259. var s, r;
  260.  
  261. // Non-IE and IE9+
  262. if (window.getSelection) {
  263. s = window.getSelection();
  264. // Safari and Chrome
  265. if (s.setBaseAndExtent) {
  266. var l = (e.innerText.length > 1) ? e.innerText.length - 1 : 1;
  267. try {
  268. s.setBaseAndExtent(e, 0, e, l);
  269. } catch (error) {
  270. r = document.createRange();
  271. r.selectNodeContents(e);
  272. s.removeAllRanges();
  273. s.addRange(r);
  274. }
  275. }
  276. // Firefox and Opera
  277. else {
  278. // Workaround for bug #42885
  279. if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) === '<BR>') {
  280. e.innerHTML = e.innerHTML + '&nbsp;';
  281. }
  282.  
  283. r = document.createRange();
  284. r.selectNodeContents(e);
  285. s.removeAllRanges();
  286. s.addRange(r);
  287. }
  288. }
  289. // Some older browsers
  290. else if (document.getSelection) {
  291. s = document.getSelection();
  292. r = document.createRange();
  293. r.selectNodeContents(e);
  294. s.removeAllRanges();
  295. s.addRange(r);
  296. }
  297. // IE
  298. else if (document.selection) {
  299. r = document.body.createTextRange();
  300. r.moveToElementText(e);
  301. r.select();
  302. }
  303. }
  304. -----------------------------------------------------------------------
  305. This small JavaScript code, responsible for expand/collapse functionality, should be placed in
  306. /template/overall_footer.html. However, it can also be placed directly in /template/forum_fn.js
  307. below the code responsible for selecting content, by removing the <script></script> tags and keeping only the function.
  308.  
  309. <script>
  310. function expandAll(element) {
  311. const codebox = element.closest('.codebox');
  312. const codeBlock = codebox.querySelector('code');
  313. if (codeBlock) {
  314. codebox.classList.add('expanded'); // Add the expanded class to the codebox
  315. codeBlock.style.overflowY = 'auto'; // Ensure vertical scrolling is enabled
  316. }
  317. }
  318.  
  319. function collapseAll(element) {
  320. const codebox = element.closest('.codebox');
  321. const codeBlock = codebox.querySelector('code');
  322. if (codeBlock) {
  323. codebox.classList.remove('expanded'); // Remove expanded class
  324. codeBlock.style.overflowY = 'auto'; // Enable vertical scrolling
  325. }
  326. }
  327. </script>
  328. -----------------------------------------------------------------------
  329. The code below has had the `<script></script>` tags removed, keeping only the functions. It can now be placed directly in `/template/forum_fn.js` instead of being placed in the HTML. The code can be placed below the code responsible for selecting the content.
  330.  
  331. function expandAll(element) {
  332. const codebox = element.closest('.codebox');
  333. const codeBlock = codebox.querySelector('code');
  334. if (codeBlock) {
  335. codebox.classList.add('expanded'); // Add the "expanded" class to the codebox
  336. codeBlock.style.overflowY = 'auto'; // Ensure vertical scrolling is enabled
  337. }
  338. }
  339.  
  340. function collapseAll(element) {
  341. const codebox = element.closest('.codebox');
  342. const codeBlock = codebox.querySelector('code');
  343. if (codeBlock) {
  344. codebox.classList.remove('expanded'); // Remove the "expanded" class
  345. codeBlock.style.overflowY = 'auto'; // Ensure vertical scrolling is enabled
  346. }
  347. }
  348. -----------------------------------------------------------------------
  349. ---> Code from /template/bbcode.html // The code can be found at lines 57-58 in the text editor.
  350. // Default code:
  351. <!-- BEGIN code_open --><div class="codebox"><p>{L_CODE}{L_COLON} <a href="#" onclick="selectCode(this); return false;">{L_SELECT_ALL_CODE}</a></p><pre><code><!-- END code_open -->
  352. <!-- BEGIN code_close --></code></pre></div><!-- END code_close -->
  353. // Custom code:
  354. <!-- BEGIN code_open -->
  355. <div class="codebox">
  356. <div class="codebox-header">
  357. <p>{L_CODE}{L_COLON}
  358. <a href="#" onclick="selectCode(this, event); return false;">{L_SELECT_ALL_CODE}</a> |
  359. <a href="#" onclick="expandAll(this); return false;">Expand All</a> |
  360. <a href="#" onclick="collapseAll(this); return false;">Collapse All</a>
  361. </p>
  362. </div>
  363. <pre><code>
  364. <!-- END code_open -->
  365.  
  366. <!-- BEGIN code_close -->
  367. </code></pre>
  368. </div>
  369. <!-- END code_close -->
  370. -----------------------------------------------------------------------
  371. To import Highlight.js, you can choose between two methods:
  372.  
  373. 1. Using a CDN
  374. Import the required resources directly from a CDN.
  375.  
  376. 2. Downloading Resources
  377. Download the Highlight.js files from the CDN and include them locally in your project.
  378.  
  379. - Advantages
  380. The advantage of downloading resources from the CDN is that you have full control to modify them as needed, allowing you to customize them to suit your project’s specific requirements.
  381.  
  382. I conducted tests both using the CDN and locally. However, I only tested the implementation in /template/overall_header.html.
  383.  
  384. Ideally, JavaScript scripts should be placed in overall_footer.html, as that is the standard location for them to function properly. However, I have not tested this setup in overall_footer.html.
  385.  
  386. Typically, CSS files like:
  387.  
  388. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/monokai-sublime.min.css">
  389. should be included in the <head> section of the document.
  390.  
  391. JavaScript scripts, however, are generally placed in the overall_footer.html file for better performance and to ensure they load after the page content.
  392.  
  393. Example: Local Highlight.js Setup
  394.  
  395. <!-- Include Highlight.js CSS and JS -->
  396. <link rel="stylesheet" href="{T_THEME_PATH}/highlightjs/monokai-sublime.css">
  397. <script src="{T_THEME_PATH}/highlightjs/highlight.min.js"></script>
  398. <script>
  399. // Enable automatic detection for all <code> blocks
  400. document.addEventListener("DOMContentLoaded", (event) => {
  401. document.querySelectorAll('pre code').forEach((block) => {
  402. hljs.highlightElement(block);
  403. });
  404. });
  405. </script>
  406.  
  407. Alternatively, you can use a shorter script to highlight all code blocks:
  408.  
  409. <!-- Include Highlight.js CSS and JS -->
  410. <link rel="stylesheet" href="{T_THEME_PATH}/highlightjs/monokai-sublime.css">
  411. <script src="{T_THEME_PATH}/highlightjs/highlight.min.js"></script>
  412. <script>
  413. hljs.highlightAll();
  414. </script>
  415.  
  416. Example: Importing Highlight.js via CDN
  417.  
  418. This method uses the CDN to directly load Highlight.js resources into your project.
  419.  
  420. <!-- Include Highlight.js CSS and JS -->
  421. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/monokai-sublime.min.css">
  422. <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
  423. <script>
  424. hljs.highlightAll();
  425. </script>
  426. -----------------------------------------------------------------------
  427.  
  428. /*
  429.  
  430. Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
  431.  
  432. */
  433.  
  434. In the example below, I will leave a small edit for monokai-sublime.css. There is a comment in the CSS code regarding what I have edited.
  435.  
  436. You have both minified and unminified CSS sources available when downloading Highlight.js from the CDN. You can easily edit the unminified version and then minify it quickly using an online tool.
  437.  
  438. Explanation:
  439. I edited the color of the .hljs-attr class to green (#a6e22e) instead of the original default color (#f92672), which is used for keywords, selector tags, and names.
  440. The comment /* Changed to green */ indicates this modification in the CSS.
  441.  
  442. // Custom code:
  443. .hljs-keyword,
  444. .hljs-selector-tag,
  445. .hljs-name {
  446. color: #f92672;
  447. }
  448. .hljs-attr {
  449. color: #a6e22e; /* Changed to green */
  450. }
  451.  
  452. // Default code:
  453. // In the text editor, within the monokai-sublime.css file, you can find this code at lines 44–51:
  454. .hljs-keyword,
  455. .hljs-selector-tag,
  456. .hljs-name,
  457. .hljs-attr {
  458. color: #f92672
  459. }
  460.  
  461. -----------------------------------------------------------------------
Tags: PHPbb Highlightjs
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!