Jump to content

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


Recommended Posts

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.mtasa.com/uploads/javascript_syntax/luafuncs.js'></script>
<script type='text/javascript' src='//forum.mtasa.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.  

  • Like 9
Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...