diff --git a/README.md b/README.md index b5a336fa..7f4f6df1 100644 --- a/README.md +++ b/README.md @@ -335,7 +335,49 @@ class Calendar(component.Component): This makes it easy to create small components without having to create a separate template, CSS, and JS file. -Note that the `t.django_html`, `t.css`, and `t.js` types are used to specify the type of the template, CSS, and JS files, respectively. This is not necessary, but if you're using VSCode with the [Python Inline Source Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=samwillis.python-inline-source) extension, it will give you syntax highlighting for the template, CSS, and JS. +### Syntax highlight and code assistance + +#### VSCode + +Note, in the above example, that the `t.django_html`, `t.css`, and `t.js` types are used to specify the type of the template, CSS, and JS files, respectively. This is not necessary, but if you're using VSCode with the [Python Inline Source Syntax Highlighting](https://marketplace.visualstudio.com/items?itemName=samwillis.python-inline-source) extension, it will give you syntax highlighting for the template, CSS, and JS. + +#### Pycharm (or other Jetbrains IDEs) + +If you're a Pycharm user (or any other editor from Jetbrains), you can have coding assistance as well: + +```python +from django_components import component + +@component.register("calendar") +class Calendar(component.Component): + def get_context_data(self, date): + return { + "date": date, + } + + # language=HTML + template= """ +
Today's date is {{ date }}
+ """ + + # language=CSS + css = """ + .calendar-component { width: 200px; background: pink; } + .calendar-component span { font-weight: bold; } + """ + + # language=JS + js = """ + (function(){ + if (document.querySelector(".calendar-component")) { + document.querySelector(".calendar-component").onclick = function(){ alert("Clicked calendar!"); }; + } + })() + """ +``` + +You don't need to use `t.django_html`, `t.css`, `t.js` and `from django_components import types as t` since Pycharm uses [language injections](https://www.jetbrains.com/help/pycharm/using-language-injections.html). +You only need to write the comments `# language=` above the variables. ## Use components in templates