☰

Hacker News blockquote styling

Adds styling to blockquotes in Hacker News comments

  1. // ==UserScript==
  2. // @name         Hacker News blockquote styling
  3. // @version      1.2
  4. // @description  Adds styling to blockquotes in Hacker News comments
  5. // @author       Ryan Buening
  6. // @license      MIT
  7. // @namespace    https://github.com/ryanbuening/userscripts
  8. // @match        https://news.ycombinator.com/*
  9. // @run-at       document-end
  10. // ==/UserScript==
  11.  
  12. const [head] = document.getElementsByTagName('head');
  13. const style = document.createElement('style');
  14. style.type = 'text/css';
  15. style.innerHTML = `
  16. .comment-quote {
  17. 	background: #46464620;
  18. 	font-style: italic;
  19. 	color: #464646;
  20. 	border-left-width: 3px;
  21. 	border-left-color: #46464650;
  22. 	border-left-style: solid;
  23. 	padding: 2px;
  24. 	padding-left: 5px;
  25. }`;
  26. head.appendChild(style);
  27.  
  28. document.querySelectorAll('.commtext').forEach(comment => {
  29.   let quoteDiv = null;
  30.   comment.childNodes.forEach(node => {
  31.     const commentLine = node.textContent || node.innerText;
  32.     if (quoteDiv || commentLine.match(/^>/)) {
  33.       if (commentLine.startsWith('>')) {
  34.         const quoteText = commentLine.substring(commentLine.indexOf('>') + 1);
  35.         if (node.textContent) {
  36.           node.textContent = quoteText;
  37.         } else {
  38.           node.innerText = quoteText;
  39.         }
  40.       }
  41.  
  42.       if (!quoteDiv) {
  43.         quoteDiv = document.createElement('div');
  44.         quoteDiv.classList.add('comment-quote');
  45.         node.parentNode.insertBefore(quoteDiv, node);
  46.       }
  47.  
  48.       quoteDiv.appendChild(node);
  49.  
  50.       if (!commentLine.match(/^>+\s*$/)) {
  51.         quoteDiv = null;
  52.       }
  53.     }
  54.   });
  55. });