1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XenForo GeSHi Syntax Highlighter dark theme

Discussion in 'Papers' started by Stéphane Lenclud, Mar 23, 2017.

  1. Stéphane Lenclud

    Stéphane Lenclud Founder Staff Member

    XenForo default code block functionality is rather basic. Thankfully GeSHi Syntax Highlighter add-on provides richer support for hundreds of programming languages. However the default GeSHi colour scheme is far from ideal on dark background therefore, once again, we needed some extra customization.

    Thanks that article on CyberAsylum we could easily work something out and apply a neat dark theme to our GeSHi syntax.

    Nonetheless that required a couple of change to BBcode Formatter Base.php.
    Basically you need to add enable_classes and set_overall_class lines to each of your formatter, CODE, HTML and CSS so that they look like that:

    PHP:
    1. $geshi->set_link_target('_blank" rel="nofollow');
    2. $geshi->set_header_type(GESHI_HEADER_NONE);
    3. $geshi->set_tab_width(4);
    4. $geshi->enable_classes(true);
    5. $geshi->set_overall_class('geshi');
    6. $content = $geshi->parse_code();
    Then edit your EXTRA.CSS and add something like:
    Code (CSS):
    1. /*
    2.  * Geshi stylesheet
    3.  *
    4.  * CyberAsylum.eu
    5.  * dark theme by niekto@niekde.sk (Jaroslav Petras)
    6.  * there is no licence and you can use it, copy it, sell it
    7.  * or burn it
    8.  *
    9.  */
    10.  
    11. div.bbCodeBlock
    12. { background: @pageBackground !important; }
    13.  
    14. /* all            */
    15. .geshi
    16. { border: none !important; }
    17.  
    18. /* lines        */
    19. .geshi .li1
    20. { background: @pageBackground !important; }
    21. .geshi .li2
    22. { background: @pageBackground !important; }
    23.  
    24. /* brackets        */
    25. .geshi .br0
    26. { color: #bfbfbf !important; }
    27.  
    28.  
    29. /* comments        */
    30. .geshi .co0,
    31. .geshi .co1,
    32. .geshi .coMULTI
    33. { color: #7a7a75 !important; }
    34.  
    35. /* strings        */
    36. .geshi .st0,
    37. .geshi .st_h
    38. { color: #ff4444 !important; }
    39.  
    40.  
    41. /* methods        */
    42. .geshi .me0,
    43. .geshi .me1
    44. { color: #ffffff !important; }
    45. .geshi .me2
    46. { color: #ffcc66 !important; }
    47.  
    48.  
    49.  
    50. /* keywords        */
    51. .geshi .kw1
    52. { color: #99ee00 !important; }
    53. .geshi .kw2
    54. { color: #eeaa22 !important; }
    55. .geshi .kw3
    56. { color: #dd88ff !important; }
    57. .geshi .kw4
    58. { color: #ff7744 !important; }
    59.  
    60. /* operators        */
    61. .geshi .sy0
    62. { color: #44ffbb !important; }
    63.  
    64. /* numbers        */
    65. .geshi .nu0
    66. { color: #ff2288 !important; }
    67.  
    68. /* variables        */
    69. .geshi .re0
    70. { color: #88c0ff !important; }
    71. .geshi .re1
    72. { color: #88c0ff !important; }
    73. .geshi .re2
    74. { color: #ccddff !important; }
    75. .geshi .re3
    76. { color: #88c0ff !important; }
    77. .geshi .re4
    78. { color: #88c0ff !important; }
    79. .geshi .re5
    80. { color: #ddddff !important; }
    81.  
    82. /* EOF            */
    See also GeSHi on GitHub.
     
    Last edited: Mar 23, 2017

Share This Page