Create Custom Syntax Highlighting in VS Code | Programming Language | Software Coding Tutorials

Поделиться
HTML-код
  • Опубликовано: 23 ноя 2024

Комментарии • 94

  • @barmetler
    @barmetler 2 года назад +83

    After 10 minutes i noticed the little face cam XD Good tutorial, very useful.

  • @RetoonHD
    @RetoonHD Год назад +6

    i do like the fact you have a comically small facecam in the top right corner i almost didn't see

  • @Avivzv2011
    @Avivzv2011 6 месяцев назад +2

    I was searching for this for a month, THANK YOU!

  • @jyotikatwal5436
    @jyotikatwal5436 2 года назад +4

    It would be better if you could explain the process of using language grammar in detail.

  • @Fox_Gaming208
    @Fox_Gaming208 Год назад +9

    This would be unimaginably difficult without your help! Thanks alot for making the world a both better and easier place. :D

  • @lolcat69
    @lolcat69 Год назад +1

    thanks for the tutorial!!! i make my own C/C++ build system, and is really strange that it doesn't have a syntax Highlighter, and sometimes i forgot keywords, so this is going to be really helpfull!!! thanks

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  Год назад +1

      Glad it helped! Subscribe if you haven't. Thank you.

  • @ArjoRoy-pe6tf
    @ArjoRoy-pe6tf 2 месяца назад +1

    Thank you so much brother, you deserve a sub! :)

  • @public-department-of-science
    @public-department-of-science 3 года назад +8

    I didn't try that yet, but I'm sure that exact for what I'm looking for! I'm working on grammar-syntax analyser and distributed computing language for science needs. Thanks a lot!!

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад +1

      You're welcome. As I pointed out in this video, this is for VS Code to recognize your new programming language, and its extension. It is quite a demanding task to create video, and trying to explain things. Please subscribe to support me. Thanks.

    • @public-department-of-science
      @public-department-of-science 3 года назад +1

      ​@@TommyNgo-SDEV Thanks, again! Staying subscribed to your channel.

    • @ashwinalagiri-rajan1180
      @ashwinalagiri-rajan1180 Год назад

      you mean a lexer? lol

  • @teresaoleary8455
    @teresaoleary8455 2 года назад +6

    Hey there! I got this hooked up, but my highlighting is still all gray. I'm wondering if I'm missing a step here in terms of when do I assign colors and in which file? Or perhaps I'm just doing this completely wrong.

    • @robnice168
      @robnice168 2 года назад

      Is the new folder you created in ~/.vscode/extensions? Does it show up under your Installed VS Code Extensions?

  • @DirkArnez
    @DirkArnez 3 года назад +3

    Exactly the tutorial looking for!

  • @yunjay99
    @yunjay99 2 года назад +7

    Would appreciate a github link!

  • @xdn_yt
    @xdn_yt 2 года назад +3

    can you share your syntax file? Great video!

  • @KuldeepSingh-cc2op
    @KuldeepSingh-cc2op 11 месяцев назад +1

    Amazing❤

  • @jainebri
    @jainebri 8 месяцев назад +1

    Amazing Man !!! Thank you very much.

  • @FriedMonkey362
    @FriedMonkey362 Год назад +2

    insanely good intro 👍

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  Год назад

      Glad you enjoy it. Subscribe if you have not.

  • @imtrollxd7988
    @imtrollxd7988 3 года назад +3

    what about the semantic highlights, i'ev been searching for it but I didn't find anything, can someone help me pls

  • @abdelazizhosny5198
    @abdelazizhosny5198 2 года назад +2

    can i get the code?
    and regarding the printf statement for example: "printfnono" shall the printf in this variable be highlighted?
    if no, then how could you do it?

  • @TheMazanec
    @TheMazanec 3 года назад +5

    Thanks a lot, this really helped me!

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад

      Thanks for watching. If you have not subscribed, please give me your support and will provide more tutorials when I have time.

  • @nitsugaorom1091
    @nitsugaorom1091 3 года назад +4

    Hi! Could u attach some bibliography to learn more about how to build the tmLanguage file? I enjoyed a lot the video, keep it up! Cheers

    • @codegate615
      @codegate615 3 месяца назад

      vscode textgrammar documentation

  • @hankhsu1996
    @hankhsu1996 3 года назад +2

    Great tutorial, thanks!

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад

      Thanks, Hank. Please make sure you subscribe if you haven't so.

  • @shinyangdevelop
    @shinyangdevelop 2 года назад +1

    Where can I get codes you used in this lecture?

  • @JSchwift
    @JSchwift Год назад +1

    Do you know where we can get an example?

  • @EmersonSuguimoto
    @EmersonSuguimoto Год назад

    could you please make a video about Jump to Definition in VS Code?

  • @Soy_N_Spy
    @Soy_N_Spy 28 дней назад

    also in the updated tmLanguge do you have the source code

  • @squidlididli
    @squidlididli 3 года назад +2

    Very good Tutorial. if i can ask a question, Could you please explain me how to change for example the comment line/block character : / by another one, in my case : ' (apostrophe) ?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад +2

      Please look at video timeline at 9:15, and 9:34, and you may need to escape the apostrophe and the forward slash. If you need further details, please look at this section: code.visualstudio.com/api/language-extensions/syntax-highlight-guide.

    • @squidlididli
      @squidlididli 3 года назад

      @@TommyNgo-SDEV can you type in some lines Of codes to explain me this? one single apostrophe at the start of the line to comment a line, instead of // ?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад +3

      ​@@squidlididli It's trial and error. So try using the the backslash (\) to escape it. So something like \/\/. Look at the example at 9:34 and 9:15 of the video. Also, at 8:46, I am using the #! (which is treated as a comment). So, do something like \ + (single apostrophe).

  • @OlivierGeorg
    @OlivierGeorg 2 года назад +1

    Good introductory tutorial, thanks. I have a question though... How do you _debug_ a syntax, without having to copy it to the .svcode/extensions directory as you do. When I try debugging that extension, it does not appear as an extension in the "test vscode instance".

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  2 года назад

      You're using Yeoman Generator to generate the "skelethon". Once you have copied the files to the proper location where VS Code can see it, it will be a trial and error. I don't know of another way of doing it. If you run across any tool that would help, please leave it in the comment section. Thanks.

    • @RootEntry
      @RootEntry 2 года назад

      F5

  • @TimofeyTimofeeff
    @TimofeyTimofeeff 2 года назад +3

    Is there a github page?

  • @tharindubalasooriya2210
    @tharindubalasooriya2210 3 года назад +2

    Great Tutorial ❤️

  • @JoEx2k11
    @JoEx2k11 2 года назад

    A question, how can I know which I have to usein order to get the matchs colorized? Like, which one is for comments, operators, etc.

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  2 года назад

      As long as your grammar is correctly described in .tmLanguage.json , VS Code will color the text accordingly. There might be a way to override the default colors using the settings.json, but it's outside the scope of this tutorial. If you want to go further, then you have to do some additional readings. I hope it helps.

  • @mastermindinclude7198
    @mastermindinclude7198 3 года назад +1

    'Yo' is not an internal or an external command. ive installed yo using the command you gave... npm and node js is up to date, is there something im missing?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад

      Did you installed 'yo generator' correctly? What OS are you installing it from?

    • @mastermindinclude7198
      @mastermindinclude7198 3 года назад +1

      @@TommyNgo-SDEV yes i used the code 'npm install -g yo generator-code' on windows, it didnt work, but dont worry, it worked on linux.

    • @dylstructor9867
      @dylstructor9867 2 года назад

      @@mastermindinclude7198 You may not of had NPM in your path

  • @josuetchirktema2270
    @josuetchirktema2270 2 года назад +3

    please it possible to share your tmLanguage file?

    • @TheLime1
      @TheLime1 2 года назад +1

      or where i find an example of that file ?

  • @El_IsraPS2
    @El_IsraPS2 Год назад

    anyone knows how to setup folding???????
    I added
    ```
    "foldingStartMarker": ".*_IMPORTS_start",
    "foldingStopMarker": ".*_IMPORTS_end",
    ```
    but still nothing happens

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  Год назад

      This question does not pertain to VS Code , and it belongs to SublimeText. You might need to search the SublimeText documentation and perhaps use regular expression.

  • @justanotherhotguy
    @justanotherhotguy 3 года назад

    Do you know if it's possible to create it using JS? As in, the whole tokeniser and a more smart token recogniser?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад

      Anything is possible if you understand the syntax highlighting for VS Code. If you can generate what 'Yeoman Generator' can produce, then you're set.

  • @nobstutorials9994
    @nobstutorials9994 2 года назад

    Just wondering, from your tutorial, would it be possible to create a syntax highlighter for Brython(more specifically, everything inside a '' tag in a HTML file)?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  2 года назад +1

      I am not certain it's going to work in your case since the file that you will be using is an .HTML extension which already existed in VS Code. On top of it, you're using Python syntax which already existed as an extension in VS Code. If you put your Python code in a separate file, and then do something like this, it will highlight for you. (Unless you create your own extension ( .bpy ), and write your own grammar).

    • @nobstutorials9994
      @nobstutorials9994 2 года назад

      @@TommyNgo-SDEV ah alright. thanks for letting me know.

  • @sayo3230
    @sayo3230 3 года назад

    I have a question though. I'm trying to improve the syntax highlighting for an already existing language for an open source project, Do i still need to install the yeoman generator?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад

      It's a tool. If you already know of a different tool or already know how to code without a given tool, then you don't have to install 'yeoman generator'.

    • @sayo3230
      @sayo3230 3 года назад

      @@TommyNgo-SDEV okay. I installed the yeoman tool already but i'm only seeing options that indicates that i want to build my own theme or extension. Please do you know another method i can use to edit the syntax highlighting of an already existing extension

  • @curious5972
    @curious5972 Год назад

    how you added the custom icon for your tpl file extension?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  Год назад +1

      Sorry, I cannot find a way to override the default icon.

    • @curious5972
      @curious5972 Год назад +1

      @@TommyNgo-SDEV chat gtp give me the way . But not available on Google

  • @alanmichaelsen1761
    @alanmichaelsen1761 2 года назад

    Tried this but yo isn't a command, would this need to be install using something like brew?

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  2 года назад +1

      You would need to install 'npm' (Node Package Manager) first, then you can install 'Yeoman' generator. To accomplish the installation on the Mac, you can use brew to install 'npm' first, and then using 'npm' to install Yeoman generator. Please revisit the PowerPoint slide at 1:55. Hopefully this would help you.

    • @alanmichaelsen1761
      @alanmichaelsen1761 2 года назад

      @@TommyNgo-SDEV I have followed everything shown but for some reason, the terminal would say that yo isn't a command, I'll have to look into this later. Thanks

  • @aurorahubps
    @aurorahubps 3 года назад

    ayo do you know to merge a already made ts ext with this? so i donr overwrite what i already did

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад

      Not sure what to do with this case. VS Code recognizes just a particular extension (e.g. ts for TypeScript). If you have a similar extension and install, it just overwrites it. If you know of a solution, please let me know. The other way is just to rename the extension to something else other than .ts.

  • @vodracseck
    @vodracseck Год назад

    how about creating intelisecse

  • @formyeve
    @formyeve 3 года назад

    bro let me help you out with your intro music

  • @rastaarmando7058
    @rastaarmando7058 Месяц назад

    Bro, not everything needs to have a "patterns" block, that's a lot of extra indentation my man.

  • @6ujkyujhrbdfgjy5
    @6ujkyujhrbdfgjy5 2 года назад

    so does this allow me to make it into a extension?

  • @philiparnaudov9001
    @philiparnaudov9001 Год назад

    when i do "ls -ltr" nothing hapens

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  Год назад

      You will need to be on macOS or Unix to perform "ls -ltr". In Windows, you can install Unix Utilities. This tutorial is for Unix environment.

  • @TheLime1
    @TheLime1 2 года назад +2

    at least share the file or make a separated video about it

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  2 года назад

      If you followed through my video, then you should have a general idea what you need to do.

  • @sarangdagdu6524
    @sarangdagdu6524 Год назад

    hi can u please help?

  • @kcvinu
    @kcvinu 11 месяцев назад

    NPM ? So we need to know JS ? Oh no way man.

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  11 месяцев назад

      Relax. You just need to know how use npm to install the Yeoman Generator tool. You don't need to know Javascript.

    • @kcvinu
      @kcvinu 11 месяцев назад

      @@TommyNgo-SDEV Oh okay. I am a system programming language lover. No web programming languages are installed in my machine. I found C3 as nice alternative to C. So I decided to create a syntax coloring plugin for that. That's all.

    • @kcvinu
      @kcvinu 11 месяцев назад

      @@TommyNgo-SDEV Oh Okay. BTW, i need to install the JS echo system.

  • @ninjacodertech
    @ninjacodertech 3 года назад

    i dont understand this sry. pls help me

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  3 года назад +1

      You have a specific question? Otherwise, no one understands you.

    • @ninjacodertech
      @ninjacodertech 3 года назад +2

      @@TommyNgo-SDEV i dont get what those some.word.things.tpl are and the #string or whatever, and im not sure how to integrate it to my language

  • @Jerraf2p0
    @Jerraf2p0 2 года назад

    I learned absolutely nothing from this video

    • @TommyNgo-SDEV
      @TommyNgo-SDEV  2 года назад

      Thank you for sharing and sorry can't do much more for you. You may want to get the fundamentals down by additional readings on your own time.

    • @Jerraf2p0
      @Jerraf2p0 2 года назад

      Sorry for sounding mad. I just wasn't in a good mood at the time of watching this.