CIT Forum Index

Support => Tutorials and Guides => General Guides => Topic started by: Backsage on 05 10, 2019, 01:59:50 am

Title: Backsage's Sublime Text 3 and VS Code MTA Lua Syntax Highlighting
Post by: Backsage on 05 10, 2019, 01:59:50 am

If you code in Lua and for MTA, then you may like these packages that I'm about to show you. This is a tutorial on how to install syntax highlighting for Lua for Sublime Text 3 and VS Code.

I have edited 50p's Sublime Text 3 and MTA: SA Lua VS Code packages to my liking so it looks more like the original MTA Lua Notepad++ package that was made by JR10.
Here's my edited version:
http://www.mediafire.com/file/gitph76wb6n7sbh/Backsages_Sublime_Text_3_and_VS_Code_MTA_Lua_Syntax_Highlighting_Packages_Notepad%252B%252B_Theme.rar/file

If you still need a copy of the original packages they're here:
http://www.mediafire.com/file/1c11ct1y4z61ddu/50pMTAEditor_%28original_by_50p%29.zip/file
https://marketplace.visualstudio.com/items?itemName=subtixx.mtasa-Lua
If you are not a fan of white editor backgrounds, then don't use my edited packages. If however you are okay with white backgrounds, then you may like these packages. For Sublime Text 3, you will need to use a theme that I have provided. It mainly fixes the colors for the autocomplete labels and text in Find/Replace dialog box. For VS Code, it uses the Dark-MTA-Edit color theme, which is found in the "themes" folder of the package (Dark-MTA-Edit.json). You'll also need to use a settings.json file I have provided. It mainly fixes the colors of the UI of VS Code with the "workbench.colorCustomizations" token, although for Code I was not able to fix all the colors of the UI that I wanted to fix without the colors looking bad in other places, so you'll either have to live with it or find the tokens and edit the colors yourself. I have provided two variations of the packages in case one of the packages has colors that don't look right on one computer compared to another computer. If you have tried both packages on a computer and the colors still don't look right, you may need to modify the colors yourself so that they are fixed.

To install for Sublime Text:
The files that are most important are Lua MTA.tmLanguage, Monokai-MTA-Edit.tmTheme, and the Backsage.sublime-theme.

• If you haven't already, download the package that was originally made by 50p here: http://www.mediafire.com/file/1c11ct1y4z61ddu/50pMTAEditor_%28original_by_50p%29.zip/file
• Navigate to the directory of the package. (C:\Users\<user>\AppData\Roaming\Sublime Text 3\Packages). You can also get there by going to Preferences > Browse Packages in Sublime Text.
• Copy and paste the Lua MTA.tmLanguage and Monokai-MTA-Edit.tmTheme from my edited version to the original package. You should also rename the package to clarify that it is now an edited version.
• Copy and paste the folder containing the Backsage.sublime-theme into the C:\Users\<user>\AppData\Roaming\Sublime Text 3\Packages directory. Make sure the name of the folder is not "Theme - Default" and the name of the file is not "Default.sublime-theme", otherwise you may not be able to get the theme to show up or change when you try to change the theme (Preferences > Theme). Basically, make sure the names are something completely different.
• (Preferences > Theme) Change to Backsage.sublime-theme.
• (Preferences > Color Scheme) Change to edited version of Monokai-MTA-Edit.
• And when opening and editing Lua files, go to View > Syntax > change to "Lua (MTA:SA) Backsage". You should see the changes instantly.

   
It also helps to have the name of the syntax changed in the Lua MTA.tmLanguage so you know which syntax it is, in case you keep both the original and edited packages, but you can name it whatever you like. For files like .json, .xml, .tmLanguage, or any file that is like xml, you do not need to change the syntax to "Lua (MTA:SA) Backsage" when you open those files because when you open those files, the syntax highlighting colors will be applied automatically and you don't need to do anything else as long as the correct theme and color theme has been set. I had to use the scope inspector to input those scopes and define their colors. In Sublime Text, the scope inspector is Tools > Developer > Show Scope Name or Ctrl+Alt+Shift+P. In VS Code, the scope inspector is View > Command Palette... > Developer: Inspect TM Scopes or Ctrl+Shift+P.

To install for VS Code:
The files that are most important are Dark-MTA-Edit.json, mtalua.tmLanguage.json, and the settings.json

• If you haven't already, download the extension for MTA Lua for VS Code here: https://marketplace.visualstudio.com/items?itemName=subtixx.mtasa-Lua
• On the Welcome page (Help > Welcome) in Code, change the color theme to "Dark MTA Edit (Visual Studio)".
• Navigate to the directory of the extension (C:\Users\<user>\.vscode\extensions\subtixx.mtasa-Lua-2.3.6).
• Copy and paste the Dark-MTA-Edit.json and mtalua.tmLanguage.json files from the edited version into their respective folders of the original extension (themes and syntaxes).
• Copy and paste the settings.json into C:\Users\<user>\AppData\Roaming\Code\User. This is a settings file and inside it, it changes the colors of the UI (the editor background for example) with the "workbench.colorCustomizations" token and has other settings for Code.
• The changes should happen instantly. If not, you may need to restart Code to see the effects. You will notice the color changes with .Lua, .json and xml like files.

For Sublime Text, I also recommend getting the "BracketHighlighter" package for highlighting matching brackets. For VS Code, I recommend the "Subtle Match Brackets" extension. My packages also contain colors for the indentation guides (the little dots in the editor that distinguishes code blocks). In the Preferences.sublime-settings file (C:\Users\<user>\AppData\Roaming\Sublime Text 3\Packages\User) add this to the file to enable colors of indentation guides:

Code: [Select]

"indent_guide_options":
[
"draw_normal",
"draw_active"
],


In the Monokai-MTA-Edit.tmTheme, you will see "stackGuide", "activeGuide", and "guide". Those are the colors for indentation guides which you can change. In the settings.json, you will see "editorIndentGuide.background" and "editorIndentGuide.activeBackground". Those are the colors for indentation guides which you can change.

If there are any other scopes that you need to add or change, you can use the scope inspector and add or change them in the Monokai-MTA-Edit.tmTheme or Dark-MTA-Edit.json files.

Title: Re: Backsage's Sublime Text 3 and VS Code MTA Lua Syntax Highlighting
Post by: iFrank on 23 10, 2022, 11:59:35 am

@Backsage, I suppose this would better be in the following board, in order to reach more audience? https://cit.gg/index.php?board=974.0

Title: Re: Backsage's Sublime Text 3 and VS Code MTA Lua Syntax Highlighting
Post by: Backsage on 26 10, 2022, 09:22:37 pm

Quote from: iFrank on 23 10, 2022, 11:59:35 am

@Backsage, I suppose this would better be in the following board, in order to reach more audience? https://cit.gg/index.php?board=974.0

I guess. I don't know if the topic needs to be moved or if I need to create the topic again.