☰

Trello Markdown Enhancer

Enhance Trello card description markdown rendering with marked.js

  1. // ==UserScript==
  2. // @name         Trello Markdown Enhancer
  3. // @description  Enhance Trello card description markdown rendering with marked.js
  4. // @version      0.1
  5. // @author       Hikerpig
  6. // @copyright    2019 hikerpig (https://openuserjs.org/users/hikerpig)
  7. // @licence      MIT
  8. // @match        https://trello.com/*
  9. // @require      https://cdn.jsdelivr.net/npm/marked/marked.min.js
  10. // @grant        none
  11. // @namespace https://gf.qytechs.cn/users/325041
  12. // ==/UserScript==
  13.  
  14. ;(function() {
  15.   'use strict'
  16.  
  17.   /**
  18.    * @type MutationObserver
  19.    */
  20.   let mo
  21.  
  22.   function renderContent(input) {
  23.     let text
  24.     if (typeof input === 'string') {
  25.       text = input
  26.     } else if (input instanceof Element) {
  27.       text = input.innerHTML
  28.     }
  29.     return marked(text)
  30.   }
  31.  
  32.   // function getRawMarkdown(descEle) {
  33.   //   let rawMarkdown = descEle.innerText
  34.   //   Object.keys(descEle).forEach(k => {
  35.   //     if (descEle[k].unmarkeddown) {
  36.   //       rawMarkdown = descEle[k].unmarkeddown
  37.   //     }
  38.   //   })
  39.   //   return rawMarkdown
  40.   // }
  41.  
  42.   /**
  43.    * Enhance description rendering with marked.js
  44.    */
  45.   function enhanceDesc() {
  46.     const descEle = document.querySelector('.js-desc')
  47.     if (!descEle) return
  48.     const pEles = descEle.querySelectorAll('p')
  49.     pEles.forEach((pEle) => {
  50.       const text = pEle.innerText
  51.       let hasTable = text.split('\n').some((lineContent) => {
  52.         if (/\|\s*---\s*|/.test(lineContent)) {
  53.           return true
  54.         }
  55.       })
  56.       if (hasTable) {
  57.         const newHTML = marked(text)
  58.         pEle.innerHTML = newHTML
  59.       }
  60.     })
  61.   }
  62.  
  63.   function bindOverlayEvents() {
  64.     const tabParentEle = document.querySelector('.js-tab-parent')
  65.     if (!mo) {
  66.       mo = new MutationObserver(mutations => {
  67.         // console.log('mutations', mutations)
  68.         let hasCardDetail = false
  69.         mutations.forEach(m => {
  70.           if (m.addedNodes.length) {
  71.             hasCardDetail = true
  72.           }
  73.         })
  74.  
  75.         if (hasCardDetail) {
  76.           enhanceDesc()
  77.         }
  78.       })
  79.     }
  80.     mo.observe(tabParentEle, { childList: true })
  81.   }
  82.  
  83.   // window.enhanceDesc = enhanceDesc
  84.  
  85.   // ---------------- start -----------------------
  86.   enhanceDesc()
  87.   bindOverlayEvents()
  88. })()

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址