FMCodes • All-in-one Webmasters community
Would you like to react to this message? Create an account in a few clicks or log in to continue.

You are not connected. Please login or register

FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Syntax Highlight - Select code language

Syntax Highlight - Select code language

2 posters
Valid
Niko
  • Forum Administrator

    Team contributor
    You have been part of the community team
    Community veteran
    You belong to this community since its ancient time
    Active Contributor
    The user has wrote more than 100 posts and comments
    Passioned user
    You have participated in 50+ different topics, a true fan!
    Post lover
    You have liked more than 50 posts!
    Beta Tester
    You have been part of the Beta-Testing team
    Forumotion expert
    This user is an expert with Forumotion free forum hosting
    10th Anniversary (Grand Re-open)
    Thanks for being part of our grand re-opening
    Merry Christmas 2022
    Thanks for having been with us during Christmas season!
    Forum Writer
    You have opened more than 20 topics on the forum
    The Life of the Party
    You have made more than 20 members in our community, wow!
    Members Guru
    You have received more than 50 likes on your posts. Our members really what you have to say!
      Posts : 3614
      Points : 129487
    Syntax Highlight - Select code language


    Overview

    Description

    This javascript uses the same pretty-print used in this forum, but with an extra feature: You can set the type of code manually.

    Demonstration

    Syntax Highlight - Select code language Code_010 Syntax Highlight - Select code language Code_011

    Technical limitations

    › This tutorial is dedicated to the forums powered by Forumotion free forum service
    › It works with all Forumotion forums' versions

    Installation

    Introduction

    General remarks or considerations about the installation

    CSS

    In order to design the style of the resource, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the codes related to your goal.

    Title and Codebox

    Change the title color or codebox format based on the code.

    You can change properties using
    Code:
    table.code-(lang)
    to set format of the codebox for a particular lang, change (lang) for its key word (first column in the languages list).

    Example:
    You need to reply to the topic in order to see the code resources



    With little configuration you can get something like this (based on the current theme of this forum):

    Syntax Highlight - Select code language Code_012

    Remove the default extra border

    The pretty-printed code is displayed with an extra gray border which is very easy to remove

    You need to reply to the topic in order to see the code resources



    Change code font-family or size

    I recommend using the same as in the default code tag

    You need to reply to the topic in order to see the code resources



    Set your own code theme

    You can use this as a reference for every span name (str, com, typ...) to change the color of every code part manually

    You can also make your custom modifications, for example with this you can set the color of the lines when they are hovered:
    Code:
    dl.codebox li:hover { background-color: #fff6ab; }

    You need to reply to the topic in order to see the code resources



    Remove the default ModernBB highlighting

    The version modernBB has already integrated a different highlighting. You can just remove it to use the one in this code instead.

    You have to go to the template
    Code:
    viewtopic_body
    , search these 3 lines in the very end and delete them:

    Code:
      $('pre, code').each(function(i, block) {
          hljs.highlightBlock(block);
      });

    Just before that, you will see these. You should also delete them.
    Code:
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/github-gist.min.css">
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/languages/go.min.js"></script>

    Javascript & jQuery

    For the next step you need to go towards Administration Control Panel (ACP) Modules HTML & Javascript Javascript codes management and create a new code - upon verifying that Javascript codes management is enabled.

    • Title: free choice - does not influence the code effect
    • Where: In all pages
    • Code:

      You need to reply to the topic in order to see the code resources



    Javascript Customization

    In the start of the code you can configurate all this:

    • Set the version of the forum you are using (it's not really important in this case except if you are using phpBB2, which needs some special bugfixes)
    • Change the skin, you can set one of the predefined (see here) or use the default and change via CSS every part to make your own skin
    • Display the line numbers
    • Texts displayed in the SCEditor dropdown
    • Complete list of available code languages. Just delete the ones you don't need in your forum. You can also change their display name in the second column.


    Notes

    Approved byNiko
    Approved on January 29th, 2022
    Tested on Most recent browsers
    Difficulty level / 
    Source Code Highlight Select

    This resource belong to this community unless differently stated.
    No reproduction possible without our agreement, in accordance with article L122-1 of the CPI.



    Valid
    hoanglongnhatbao


    • Community veteran
      You belong to this community since its ancient time
      Passioned user
      You have participated in 50+ different topics, a true fan!
      Active Contributor
      The user has wrote more than 100 posts and comments
      Post lover
      You have liked more than 50 posts!
      Members Guru
      You have received more than 50 likes on your posts. Our members really what you have to say!
        Posts : 145
        Points : 93767
      Wow ,good

      Topic Actions

      Sponsored




      FMCodes • All-in-one Webmasters community  » Coding Community » Javascript & jQuery » Javascript & jQuery Tutorials » Syntax Highlight - Select code language

      ©phpBB | Contact | Report an abuse | Cookies