mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-09-26 15:39:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

docs: add documentation for jetbrains IDEs

Browse source 
* Add documentation about code highlight on single-file-components
This commit is contained in:
daniboygg 2024-07-20 21:17:43 +02:00 • committed by Emil Stenström
parent abe8d2051c
commit 82d532ab26
1 changed files with 43 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

44
README.md
View file

@ -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= """
<div class="calendar-component">Today's date is <span>{{ date }}</span></div>
"""
# 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=<lang>` above the variables.
## Use components in templates