☰

zhihu one

知乎代码高亮

  1. // ==UserScript==
  2. // @name         zhihu one
  3. // @version      0.1.4
  4. // @description  知乎代码高亮
  5. // @author       Limboer
  6. // @match        *://*.zhihu.com/*
  7. // @resource     darkCSS https://gitee.com/limboer/zhihu-highlight/raw/master/dark.css
  8. // @resource     lightCSS https://gitee.com/limboer/zhihu-highlight/raw/master/light.css
  9. // @grant        GM_addStyle
  10. // @grant        GM_getResourceText
  11. // @namespace    https://greasyfork.org/users/443935
  12. // ==/UserScript==
  13.  
  14.  
  15. (function() {
  16. const createDOMFromString = (html) => {
  17.   const div = document.createElement('div')
  18.   div.insertAdjacentHTML('beforeend', html)
  19.   return div
  20. }
  21.  
  22. const mount = (component, root, position='beforeend') => {
  23.   root.insertAdjacentElement(position, component.renderDOM())
  24.   component.onStateChange = (oldEl, newEl) => {
  25.     root.insertAdjacentElement(position, newEl)
  26.     root.removeChild(oldEl)
  27.   }
  28. }
  29.  
  30. class Component {
  31.   constructor(props={}) {
  32.     this.props = props
  33.     this.el = null
  34.     this.state = {}
  35.   }
  36.  
  37.   onStateChange(oldEl, newEl) {
  38.     console.log('state changed')
  39.   }
  40.  
  41.   setState(newState) {
  42.     const oldEl = this.el
  43.     this.state = newState
  44.     this.el = this.renderDOM()
  45.     this.onStateChange(oldEl, this.el)
  46.   }
  47.  
  48.   handleClick() {
  49.     console.log('clicked')
  50.   }
  51.  
  52.   render() {
  53.     return '<div></div>'
  54.   }
  55.  
  56.   renderDOM() {
  57.     this.el = createDOMFromString(this.render())
  58.     this.el.addEventListener('click', e => this.handleClick(e), false)
  59.  
  60.     return this.el
  61.   }
  62. }
  63.  
  64. class ThemeToogleButton extends Component {
  65.   constructor(props) {
  66.     super(props)
  67.     this.state = {
  68.       theme: document.querySelector('html').getAttribute('data-theme') || 'light'
  69.     }
  70.     this.toogleTheme()
  71.     console.log('state', this.state)
  72.   }
  73.  
  74.   toogleTheme() {
  75.     const darkMode = GM_getResourceText("darkCSS")
  76.     const lightMode = GM_getResourceText("lightCSS")
  77.     if (this.state.theme === 'dark') {
  78.       GM_addStyle(darkMode)
  79.     } else {
  80.       GM_addStyle(lightMode)
  81.     }
  82.     // 发送改变主题的请求, 在用户下一次刷新页面的时候更新该 url 下的主题
  83.     fetch(`/?theme=${this.state.theme}`)
  84.       .then(res => document.querySelector('html').setAttribute('data-theme', this.state.theme))
  85.       .catch(error => console.error('error', error))
  86.   }
  87.  
  88.   handleClick(e) {
  89.     this.setState({
  90.       theme: this.state.theme === 'light' ? 'dark' : 'light'
  91.     })
  92.     this.toogleTheme()
  93.   }
  94.  
  95.   render() {
  96.     return `
  97.       <div class="CornerAnimayedFlex">
  98.         <button
  99.           data-tooltip=${this.state.theme === "dark" ? "日常模式" : "黑暗模式"}
  100.           data-tooltip-position="left"
  101.           type="button"
  102.           class="Button CornerButton Button--plain"
  103.         >
  104.           ${this.state.theme === "dark" ? "Light" : "Dark"}
  105.         </button>
  106.       </div>
  107.     `
  108.   }
  109. }
  110.  
  111. const root = document.querySelector('.CornerButtons')
  112. const themeToogleButton = new ThemeToogleButton()
  113. mount(themeToogleButton, root, 'afterbegin')
  114.  
  115. })();