From 247bfc02cac966000aa4cfcd784eba45812136ff Mon Sep 17 00:00:00 2001 From: Kai Breucker Date: Sat, 13 Jul 2024 16:26:18 +0200 Subject: [PATCH] Added new tutorial on Blade --- content/tutorials.md | 4 +- content/tutorials/laravel/blade-in-neovim.md | 53 ++++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) create mode 100644 content/tutorials/laravel/blade-in-neovim.md diff --git a/content/tutorials.md b/content/tutorials.md index 00f188c..1cc4108 100644 --- a/content/tutorials.md +++ b/content/tutorials.md @@ -16,8 +16,10 @@ date_last_mod: 2023-09-23 10:17:00 +0200 ## Vim und Neovim - [**Verzeichnisstruktur**]({% link content/tutorials/vim/verzeichnisstruktur.md %}) -- [**Neovim für WordPress**]({% link content/tutorials/wordpress/wordpress-in-neovim.md %}) ## WordPress - [**WordPress einrichten (Arch Linux)**]({% link content/tutorials/wordpress/wordpress-einrichten.md %}) - [**Neovim für WordPress**]({% link content/tutorials/wordpress/wordpress-in-neovim.md %}) + +## Laravel +- [**Blade in Neovim]($ link content/tutorials/laravel/blade-in-neovim.md $}) diff --git a/content/tutorials/laravel/blade-in-neovim.md b/content/tutorials/laravel/blade-in-neovim.md new file mode 100644 index 0000000..b7edb54 --- /dev/null +++ b/content/tutorials/laravel/blade-in-neovim.md @@ -0,0 +1,53 @@ +# Blade in Neovim +[Blade](https://laravel.com/docs/11.x/blade){:target="_blank"} ist Laravels hauseigene Template-Sprache. Sie wird nicht von Neovim ohne Weiteres unterstützt. Besonders frustrierend: Wenn man die entsprechenden Dateien öffnet, bleibt Syntax-Highlighting ausgeschaltet. Nicht nur für Blade selbst - auch für PHP und HTML. + +Die Arbeit ohne farbliche Hervorhebungen ist heutzeutage unzumutbar, deshalb wollen wir zunächst das Syntax-Highlighting zum Laufen bringen. Im Anschluss daran wird (gewissermaßen als Bonus) gezeigt, wie sich Blade-Code mithilfe von [conform.nvim](https://github.com/stevearc/conform.nvim){:target="_blank} autoformatieren lässt. + +Ich folge hier zwei Anleitungen, die sich im Grunde leicht finden lassen, aber bei denen man vielleicht leicht etwas übersieht. Für die Tree-sitter-Grammatik ein [GitHub-Issue](https://github.com/EmranMR/tree-sitter-blade/discussions/19){:target="_blank"} und für die Autoformatierung [@jogarcias Anleitung](https://medium.com/@jogarcia/laravel-blade-on-neovim-ee530ff5d20d){:target="_blank"}. + +## Tree-sitter für Blade +Viele Features von Neovim stützen sich auf Parsing durch [Tree-sitter](https://github.com/tree-sitter/tree-sitter){:target="_blank}. Blade ist leider nicht Teil der Sprachen, die sich einfach durch `TSInstall X` installieren lassen. @EmranMR hat jedoch eine [Grammatik](https://github.com/EmranMR/tree-sitter-blade/tree/main){:target="_blank"} geschrieben, die wir Tree-sitter manuell hinzufügen können. Dazu müssen wir mehrere Dinge tun. + +1. Zunächst müssen wir der Tree-sitter-Konfiguration die Grammatik hinzufügen. Vermutlich haben die meisten Nutzer bereits eine `require'nvim-treesitter.configs'.setup{...}`-Konfiguration; neue Grammatiken werden mit `require "nvim-treesitter.parsers".get_parser_configs()` hinzugefügt. +```lua +require'nvim-treesitter.configs'.setup{...} + +local parser_config = require "nvim-treesitter.parsers".get_parser_configs() +parser_config.blade = { + install_info = { + url = "https://github.com/EmranMR/tree-sitter-blade", + files = {"src/parser.c"}, + branch = "main", + }, + filetype = "blade" +} + +-- Set the *.blade.php file to be filetype of blade +vim.filetype.add({ + pattern = { + [".*%.blade%.php"] = "blade", + }, +}) +``` +2. Um Syntax-Highlighting zu ermöglichen, muss `~/.config/nvim/after/queries/blade/highlights.scm` mit folgendem Inhalt erstellt werden: +```Query +(directive) @function +(directive_start) @function +(directive_end) @function +(comment) @comment +((parameter) @include (#set! "priority" 110)) +((php_only) @include (#set! "priority" 110)) +((bracket_start) @function (#set! "priority" 120)) +((bracket_end) @function (#set! "priority" 120)) +(keyword) @function +``` + +3. Durch Tree-sitters [Language Injection](https://tree-sitter.github.io/tree-sitter/syntax-highlighting#language-injection){target="_blank"}-Feature wird festgelegt, dass auch der PHP-Code in den gleichen Dateien berücksichtigt wird. Ansonsten würden nur Blades eigenen Symbole und Directives eingefärbt. Dazu wird `~/.config/nvim/after/queries/blade/injections.scm` mit folgendem Inhalt erstellt:[^injections] +```Query +((text) @injection.content + (#not-has-ancestor? @injection.content "envoy") + (#set! injection.combined) + (#set! injection.language php)) +``` + +[^injections]: In der entsprechenden [Datei auf GitHub](https://github.com/EmranMR/tree-sitter-blade/blob/main/queries/injections.scm){:target="_blank"} finden sich weitere Injections. Diese könnten in einigen Fällen notwendig sein.