Language Request: grammar "HTML (Django)" with extension ".html"

muppetjones commented 9 years ago

Fairly straightforward.

Atom Beautify could not determine a supported beautifier to handle this file with grammar "HTML (Django)" and extension ".html". If you would like to request support for this file and it's language, please create an issue for Atom Beautify at https://github.com/Glavin001/atom-beautify/issues

Please let me know if I can help in any way.

Glavin001 commented 9 years ago

1) Could you provide me with a sample input file so I can add HTML (Django) to my tests. I cannot support what I cannot see :wink:.

2) You can temporarily try to use Pretty Diff by switching the file's grammar in Atom to one that Pretty Diff handles. Menu --> Edit --> Select Grammar -> Select HTML (Ruby - ERB) for example. Then try to beautify. Let me know if this works for you, and if so, then we can definitely support HTML (Django) very soon.

Update: As pointed out in https://github.com/Glavin001/atom-beautify/issues/309#issuecomment-99497183 I shouldn't recommend ERB. Could you try JavaScript Template instead. I forgot that ERB defaults to using htmlbeautifier.

muppetjones commented 9 years ago

Using the javascript template results in some very strange formatting.

Here's an example (Note: These examples are loosely derived from Test-Driven Development with Python by Harry J.W. Percival):

base.html

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>To-do Lists</title>
    {# <link href="/static/semantic-ui/semantic.min.css" rel="stylesheet"> #}
    <link href="{% static 'semantic-ui/semantic.css' %}" type="text/css" rel="stylesheet">

</head>

<body>
    <div class="pusher">
        <div class="ui two column centered grid">
            <div class="column">
                <div class="ui center aligned basic segment">
                    <h1>{% block header_text %}{% endblock %}</h1>
                    <form method="POST" action="{% block form_action %}{% endblock %}">
                        {% csrf_token %}
                        <input name="item_text" id="id_new_todo_item" placeholder='Enter a to-do item' />
                    </form>
                </div>
                {% block table %} {% endblock %}
            </div>
        </div>
    </div>
</body>

</html>

and in another file:


{% extends 'todo_lists/base.html' %}

{% block header_text %}Your to-do list{% endblock %}
{% block form_action %}/lists/{{ list.id }}/add_todo_item{% endblock %}

{% block table %}
    <table id="id_todo_list_table">
        {% for item in list.todoitem_set.all %}
        <tr>
            <td>{{ forloop.counter }}: {{ item.text }}</td>
        </tr>
        {% endfor %}
    </table>
{% endblock %}

I'm currently using a few atom modules to handle them: atom-django-templates: This package is probably causing atom-beautify not to recognize the file type. I think it's sole purpose is to change the type of file from HTML to HTML (django). language-python-django-templates: This package provides the syntax highlighting.

I turned off linter-tidy for now, because it was deleting all of the django parts.

In general: 1) Django template variables are enclosed with {{ and }}, and code statements are enclosed with [% %}. Comments are enclosed with {# #}. 2) I've seen various styles for indentation. For instance, some people will indent the <tr>...</tr> segment in the for loop.

Glavin001 commented 9 years ago

Could you try some more at http://prettydiff.com/ and if there are problems report them to @prettydiff over at https://github.com/prettydiff/prettydiff/issues

Once (if) Pretty Diff supports this, then Atom Beautify could add support fairly quickly.

prettydiff commented 9 years ago

I need to add support for the {# #} delimiters, but otherwise it looks pretty good. Pretty Diff result of the base HTML sample:

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>To-do Lists</title>
        {# 
        <link href="/static/semantic-ui/semantic.min.css" rel="stylesheet">
        #} 
        <link href="{% static 'semantic-ui/semantic.css' %}" rel="stylesheet"
            type="text/css">
    </head>
    <body>
        <div class="pusher">
            <div class="ui two column centered grid">
                <div class="column">
                    <div class="ui center aligned basic segment">
                        <h1>{% block header_text %}{% endblock %}</h1>
                        <form action="{% block form_action %}{% endblock %}" method="POST">
                            {% csrf_token %}
                            <input id="id_new_todo_item" name="item_text" placeholder='Enter a to-do item'/>
                        </form>
                    </div>
                    {% block table %}
                    {% endblock %}
                </div>
            </div>
        </div>
    </body>
</html>

I also need to add language detection for markup code that starts with funny template delimiters. I cannot autodetect the second code sample, but when I do it looks correct.

Glavin001 commented 9 years ago

I cannot autodetect the second code sample, but when I do it looks correct.

For Atom Beautify, I try my best not to leave it up to Pretty Diff's autodetect feature in case there are some cases that could be difficult to detect, and Atom Beautify really already knows how it should be handled. See https://github.com/Glavin001/atom-beautify/blob/master/src/beautifiers/prettydiff.coffee#L42-L62

I need to add support for the {# #} delimiters, but otherwise it looks pretty good.

Excellent to hear! Let me know when I should update on Atom Beautify. Thanks!

muppetjones commented 9 years ago

The first sample looks pretty good, but the second sample gets a little smushed at the top:

{% extends 'todo_lists/base.html' %}
{% block header_text %}Your to-do list{% endblock %} {% block form_action
%}/lists/{{ list.id }}/add_todo_item{% endblock %} {% block table %}
<table id="id_todo_list_table">
    {% for item in list.todoitem_set.all %}
    <tr>
        <td>{{ forloop.counter }}: {{ item.text }}</td>
    </tr>
    {% endfor %}
</table>
{% endblock %}

Glavin001 commented 9 years ago

Let me know when this is working on Pretty Diff and it can be expedited on Atom Beautify. Thanks!

jornvandijk commented 9 years ago

Looking forward to support for Django as well.

distributedlock commented 9 years ago

:+1: Django support would be really helpful.

Glavin001 commented 9 years ago

Please test beautification of your own samples with these beautifiers:

Let me know which work and do not, and how so. If there is a currently implemented beautifier that works, then this Issue will be pushed up the priority list, because it will be quicker to implement. Let me know. Thanks.

distributedlock commented 9 years ago

@Glavin001 Both prettydiff and jsbeautifier don't work because they take Django blocks wrapped in curly braces and treat them as if they're JavaScript blocks by pulling the right most brace downwards.

Example:

{ #Some Django Comment# } will be looking like:

{#
    Some Django Comment#
}

One of the main problems is that recognizing something is a Django template because templates can inherit from other templates. Jsbeautifier checks if it's JS or if it's html and even though a Django template is pretty much HTML, it is being treated as a completely different language with the HTML being not beautified.

I know this is really vague. I will do some research once I am home and post actual cases.

Glavin001 commented 9 years ago

This makes sense, @RanadeepPolavarapu . Thanks for looking into it. @prettydiff is currently away for a few weeks. @prettydiff and I will have to discuss some options to figure out the best way to approach this. You could contact the JS Beautifier team, however I believe they only want to support raw HTML, CSS, and JavaScript, and not these kind of template languages.

tvavrys commented 9 years ago

Definitely :+1:

Ignoring Django tags would be enough for me at the beginning.

prettydiff commented 9 years ago

@RanadeepPolavarapu I cannot seem to reproduce that problem in Pretty Diff. Here is some code I looked at https://gist.github.com/prettydiff/972b8c59d898e74e4084 and tested it at http://prettydiff.com/?m=beautify

danchamorro commented 7 years ago

Trying to use Django Template with HTML extension. On save it pushes together rather than stay horizontal. I have to wrap in p tags. Any idea?

cmoud94 commented 7 years ago

Is there someone working on this? I'm working on Django project in Atom and when beautifying html files the beautifier sometimes split lines badly so Django is throwing exceptions when loading this template. The problem is in both JS Beautify and Pretty Diff.

JS Beautify example:

{% endif %} is split into two lines (especially the closing bracket %})

Also happens with code like {% if author == request|author_from_request %} where the remainder after equals signs is split to new line.

Pretty Diff example:

Makes this:

{% if author == request|author_from_request %}

into this:

{% if author == request | author_from_request %}

rtizzy commented 5 years ago

Hey folks,

It's 2019 and I too am working on some Django stuff in Atom :)

Were these issues ever fully resolved?

I tried beautifying some Django HTML and .py files and it ain't looking so beautiful :P

~RT

Glavin001 / atom-beautify

Language Request: grammar "HTML (Django)" with extension ".html" #321

base.html