[REL] MTA-Prettify: Add MTA Syntax Highlighting to your website

[darkdreamingdan]

So I'm finally releasing the MTA Highlight extension that powers our syntax highlighting on the forums and on the wiki.  This enables the blue and orange links you see that link to the Wiki for MTA functions.

The highlighter is built off of Google's prettify library, so is only compatible with software that uses Google Prettify to highlight their code.

Installation

Usage is really simple, and it sits very well with Google's own prettify library. Note, that you'll need a version of JQuery for the functions to work.

In your HTML HEAD includes, add the following:

<!-- Add JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Add Google Prettify library -->
<script src="//cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<!-- Lua not added by default, add it-->
<script src="//cdn.rawgit.com/google/code-prettify/master/src/lang-lua.js"></script> 

<!-- Get the latest function definitions from MTA Forums -->
<script type='text/javascript' src='//forum.multitheftauto.com/uploads/javascript_syntax/luafuncs.js'></script>
<script type='text/javascript' src='//forum.multitheftauto.com/uploads/javascript_syntax/mtafuncs.js'></script>
<!-- Add MTA-prettify library -->
<link rel="stylesheet" type="text/css" href="//cdn.rawgit.com/darkdreamingdan/MTA-prettify/master/mtahighlight.min.css">
<script type='text/javascript' src="//cdn.rawgit.com/darkdreamingdan/MTA-prettify/master/mtahighlight.min.js"></script>

You'll then need some JavaScript to use Google's Prettify and apply MTA's markup:

$(function () {
    // Perform Google Prettify
    PR.prettyPrint();
    // Add MTA markup
    applyMTAMarkup();
});

Usage

Usage is just like Google's own Prettify, but you'll need to add lang-lua as a class to your <pre/> snippets. For example:

<pre class="prettyprint lang-lua">
function onWasted() 
  if not( isGuestAccount (getPlayerAccount(source)) ) then 
    local jailtime = getAccountData(getPlayerAccount(source), "Jailtime" ) or 0 
    local theWeapon = getPedWeapon (source) 
    local weaponAmmo = getPedTotalAmmo (source) 
    if tonumber(jailtime) == nil or 0 then 
    outputChatBox ("1", root) 
    fadeCamera (source, false) 
    setTimer (setElementHealth, 1500, 1, source, 10) 
    setTimer (setCameraTarget, 1250, 1, source, source) 
    setTimer (fadeCamera, 2000, 1, source, true) 
    setTimer (giveWeapon, 2000, 1, source, theWeapon, weaponAmmo, true) 
    elseif tonumber(jailtime) > 0 then 
    outputChatBox ("2", root) 
    fadeCamera (source, false) 
    setTimer (portjail, 1500, 1) 
    setTimer (setElementHealth, 1500, 1, source, 10) 
    setTimer (setCameraTarget, 1250, 1, source, source) 
    setTimer (fadeCamera, 2000, 1, source, true) 
    setTimer (giveWeapon, 2000, 1, source, theWeapon, weaponAmmo, true) 
    end 
  end 
end 
addEventHandler ("onPlayerWasted", getRootElement(), onWasted) 
</pre>

Example

An example JSFiddle is available here: https://jsfiddle.net/darkdreamingdan/0uvzbL1n/.

 

---

Source code available here: https://github.com/darkdreamingdan/MTA-prettify .  I'd really appreciate a GitHub star if you found this useful!

Note: Usage may be different if installing on different CMS software.  Typically, this is easily implemented by using your CMS/forum's Theme editor.  

[#BrosS]

Nice !, @iPrestege Hope you find it usefull

Thanks DarkDream 

[iPrestege]

Thanks a lot for sharing this useful library i'm going to try to make a editor in my community forum.

And yeah you got my star  .

[Senpai]

Thanks I needed this