search

microsoft / vscode

Visual Studio Code
https://code.visualstudio.com
MIT License
164.52k stars 29.39k forks source link

Theme not converting text into proper format. #17273

Closed ysmnikhil closed 7 years ago

ysmnikhil commented 7 years ago
Extension Author Version
beautify HookyQR 0.5.5
crane HvyIndustries 0.2.2
format-indent Kasik96 1.3.0
html-snippets abusaidm 0.0.18
vscode-twig-pack bajdzis 1.0.0
phpserver brapifra 1.1.0
php-debug felixfbecker 1.9.7
php-intellisense felixfbecker 0.0.11
ftp-simple humy2833 0.4.2
spacegray-vscode ionutvmi 1.1.3
Angular2 johnpapa 1.0.2
debugger-for-chrome msjsdiag 2.2.2
vscode-icons robertohuertasm 4.0.1
Spell seanmcbreen 0.8.6
guides spywhere 0.5.1
code-spell-checker streetsidesoftware 0.11.4
twig whatwedo 1.0.1
Material-theme zhuangtongfa 1.0.3

It's not related to new version 1.8, it was in previous version as well.

I worked on PHP - Symfony framework, with twig (no need to study more, you can assume it as PHP with HTML ) in templating + Bacbone.js (for templating as well). The issue is that it's Visual Studio Code shows simple text after in my file, isn't formatting it theme-wise. Please refer to attached image

Image of Code

sample code, It's some part of the file but last part of the code is not converting - 

<script id="left_sidebar_tmp" type="text/template">
<ul class="list-block predefined-label-list">
<li <% if(active == '') { %> class="active" <% } %> >
    <a href="#">
        {% trans %}All{% endtrans %}
        <span class="badge badge-success">
            <%= labelDetails.predefind.all %>
        </span>
    </a>
</li>
<li <% if(active == 'new') { %> class="active" <% } %> >
    <a href="#new">
        {% trans %}New{% endtrans %}
        <span class="badge badge-success">
            <%= labelDetails.predefind.new %>
        </span>
    </a>
</li>
<li <% if(active == 'unassigned') { %> class="active" <% } %> >
    <a href="#unassigned">
        {% trans %}Unassigned{% endtrans %}
        <span class="badge badge-danger">
            <%= labelDetails.predefind.unassigned %>
        </span>
    </a>
</li>
<li <% if(active == 'mine') { %> class="active" <% } %> >
    <a href="#mine">
        {% trans %}Assigned to me{% endtrans %}
        <span class="badge badge-success">
            <%= labelDetails.predefind.mine %>
        </span>
    </a>
</li>
<li <% if(active == 'starred') { %> class="active" <% } %> >
    <a href="#starred">
        {% trans %}Starred{% endtrans %}
        <span class="badge badge-success">
            <%= labelDetails.predefind.starred %>
        </span>
    </a>
</li>
<li <% if(active == 'trashed') { %> class="active" <% } %> >
    <a href="#trashed">
        {% trans %}Trashed{% endtrans %}
        <span class="badge badge-success">
            <%= labelDetails.predefind.trashed %>
        </span>
    </a>
</li>
</ul>
<a href="#" class="expand-labels" <% if(!labelDetails.custom.length) { %> style="display:none" <% } %>>
{% trans %}More{% endtrans %}
<span class="caret"></span>
</a>
<ul class="list-block custom-label-list nopadding" style="max-height:205px;overflow:auto">
</ul>
</script>

<script id="label_item_tmp" type="text/template">
<span class="label-name">
<span class="label-color dropdown <% if(!color) { %>default<% } %>" style="<% if(color) { %>background-color:<%= color %><% } %>;margin-top:2px">
    <i class="fa fa-caret-down">
    </i>
</span>
<a href="#label/<%= id %>">
    <%= name %>
</a>
</span>
<span class="badge badge-success">
<%= count %>
</span>
<a href="" class="delete pull-right">
<i class="fa fa-trash-o"></i>
</a>
</script>

<script id="update_label_popup_tmp" type="text/template">
<div class="dropdown-menu label-update-popup" style="display:block">
<div class="input-group pull-left">
    <input class="form-control label-update-name" type="text" name="name" value="<%= name %>" placeholder="{% trans %}Enter label name{% endtrans %}">
    <input type="hidden" class="label-id" name="id" value="<%= id %>">
    <div class="input-group-btn">
        <button class="btn btn-primary update-label-btn" type="button" tabindex="-1">
            {% trans %}Update{% endtrans %}
        </button>
    </div>
</div>
<div class="color-list">
    <label>
        {% trans %}Choose Label Color{% endtrans %}
    </label>
    <div>
        <% 
            colors = ['#F48EF1','#74BCE2','#87C18A','#F1BC42','#F87A7A','#F49561']
        %>
        <% for(var colorTemp in colors) { %>
            <span class="label-color <% if(color == colors[colorTemp]) { %>active<% } %>" style="background-color:<%= colors[colorTemp] %>"></span>
        <% } %>
    </div>
</div>
</div>
</script>
<script id="ticket_status_tab_tmp" type="text/template">
{% set statusFaIcons = {'1': 'fa-inbox', '2': 'fa-exclamation-triangle', '3': 'fa-check-circle', '4': 'fa-minus-circle', '5': 'fa-ban','6': 'fa-lightbulb-o'} %}
{% for status in ticket_service.getStatus() %}
<li class="open <% if(active == {{ status.id }} {% if status.id == 1 %} || active == 0{% endif %}) { %>active<% } %> {% if status.id == 6 %} last{% endif %}" data-id="{{ status.id }}" <% if(active == {{ status.id }} {% if status.id == 1 %} || active == 0{% endif %}) { %>style="border-top:3px solid {{ status.color }}"<% } %>>
    <i class="fa {{statusFaIcons[status.id]}}"></i>
    <span class="name">{{ status.name|trans() }}</span>
    <span class="badge">
        <% if(status[1] != undefined) { %>
            <%= status[{{ status.id }}] %>
        <% } else { %>
            0
        <% } %>
    </span>
</li>
{% endfor %}
</script>

<script id="assigned_agent_tmp" type="text/template">
<a href="#" class="edit-ticket-agent">
<span class="badge badge-sm badge-primary">
    <i class="fa fa-pencil"></i>
</span>
</a>
<select class="selectpicker agents" data-live-search="true" title='{% trans %}Assign to{% endtrans %}'>
{% for agent in agents %}
    {% set html = agent.smallThumbnail ? "<img class='border' src='" ~ agent.smallThumbnail ~ "'/>" : agentAsset %}
    <option value="{{ agent.id }}" <% if(agent && {{ agent.id }} == agent) { %>selected<% } %> data-content="<span class='round-tabs two'>{{ html|raw }}</span><div class='name'>{{ agent.name }}</div>"></option>
    }
{% endfor %}
</select>
<span class="assign-text">
{% trans %}Assigned To{% endtrans %} - 
</span>
{% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
<a class="semibold" href="{{ path('edit_user') }}/<%= agent %>" title="<%= name %>">
{% else %}
<a class="semibold" title="<%= name %>">
{% endif %}
<%= firstName %>
</a>
</script>

<script id="ticket_list_item_tmp" type="text/template">
<td class="quick-link" style="<% if(priority) { %>border-left: 3px solid <%= priority.color %><% } %>;">
<input type="checkbox" value="<%= id %>"  class="mass-action-checkbox"/>
<% if(source == 'website') { %>
    <i class="fa fa-television source" aria-hidden="true"></i>
<% } else if(source == 'email') {  %>
    <i class="fa fa-envelope-o source" aria-hidden="true"></i>
<% } else if(source == 'facebook') {  %>
    <i class="fa fa-facebook source" aria-hidden="true"></i>
<% } else if(source == 'twitter') {  %>
    <i class="fa fa-twitter source" aria-hidden="true"></i>
<% } %>
<a href="" class="mark-star">
    <% if(isStarred) { %>
        <i class="fa fa-star yellow"></i>
    <% } else { %>
        <i class="fa fa-star"></i>
    <% } %>
</a>
<a class="bold quick-view" href="" data-id="<%= id %>">
    <span class="badge badge-lg badge-primary">
        <i class="fa fa-bolt"></i>
    </span>
</a>
</td>
<td class="id">
<a href="<%= path %>">
    #<%= incrementId %>
</a>
</td>
<td class="customer-name">
<a href="<%= path %>" title="<%= customer.name %>">
    <%= customer.name.split(" ")[0] %>
</a>
</td>
<td class="subject">
<a href="<%= path %>">
    <% if(hasAttachments) { %>
        <i class="fa fa-paperclip"></i>
    <% } %>
    <% if(subject.length > 40) { %>
        <%= subject.substring(0, 40)+"..."  %>
    <% } else { %>
        <%= subject %>
    <% } %>
</a>
<span class="fade-subject"></span>
</td>
<td class="details">
<a href="<%= path %>">
    <span class="date"><%= formatedCreatedAt %></span>
    <span class="badge badge-lg"><%= totalThreads %></span>
    <% if(group) { %>
        <% if(group.length > 17) { %>
            <span class="badge badge-lg group" title="<%= group %>"><%= group.substring(0, 17)+"..." %></span>
        <% } else { %>
            <span class="badge badge-lg group"><%= group %></span>
        <% } %>
    <% } %>
</a>
</td>
<td class="agent-name">
<% if(!isTrashed) { %>
    {% if user_service.checkPermission('ROLE_AGENT_ASSIGN_TICKET') %}
        <% if(agent) { %>
            <a href="#" class="edit-ticket-agent">
                <span class="badge badge-sm badge-primary">
                    <i class="fa fa-pencil"></i>
                </span>
            </a>
        <% } else { %>
            <button class="btn btn-md btn-info edit-ticket-agent">
                <i class="fa fa-plus-circle"></i>
                {% trans %}Agent{% endtrans %}
            </button>
        <% } %>
        <select class="selectpicker agents" data-live-search="true" title='{% trans %}Assign to{% endtrans %}'>
            {% for agent in agents %}
                {% set html = agent.smallThumbnail ? "<img class='border' src='" ~ agent.smallThumbnail ~ "'/>" : agentAsset %}
                <option value="{{ agent.id }}" <% if(agent && {{ agent.id }} == agent.id) { %>selected<% } %> data-content="<span class='round-tabs two'>{{ html|raw }}</span><div class='name'>{{ agent.name }}</div>"></option>
                }
            {% endfor %}
        </select>
    {% else %}
        <% if(agent) { %>
            <i class="fa fa-user" aria-hidden="true"></i>
        <% } %>
    {% endif %}
<% } %>
<% if(agent) { %>
    {% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
        <a class="semibold" href="{{ path('edit_user') }}/<%= agent.id %>" title="<%= agent.name %>">
    {% else %}
        <a class="semibold" title="<%= agent.name %>">
    {% endif %}
        <%= agent.name.split(" ")[0] %>
    </a>
<% } %>
</td>
<td class="responsive-data">
<ul class="list-block">
    <li class="subject">
        <a href="<%= path %>" class="bold">
            <%= subject %>
        </a>
    </li>
    <li class="customer-info">
        {% if user_service.checkPermission('ROLE_AGENT_MANAGE_CUSTOMER') %}
            <a href="<%= path %>" class="bold ellipsis-name">
        {% else %}
            <a class="bold ellipsis-name">
        {% endif %}
            <%= customer.name %>
        </a>
    </li>
    <li class="agent-info pull-left">
        <span class="ticket-d pull-left">
            #<%= incrementId %>
        </span>
        <span class="agent">
            {% if user_service.checkPermission('ROLE_AGENT_ASSIGN_TICKET') %}
                <% if(agent) { %>
                    <a href="#" class="edit-ticket-agent">
                        <span class="badge badge-sm badge-primary">
                            <i class="fa fa-pencil"></i>
                        </span>
                    </a>
                <% } else { %>
                    <button class="btn btn-md btn-info edit-ticket-agent">
                        <i class="fa fa-plus-circle"></i>
                        {% trans %}Agent{% endtrans %}
                    </button>
                <% } %>
                <select class="selectpicker agents" data-live-search="true" title='{% trans %}Assign to{% endtrans %}'>
                    {% for agent in agents %}
                        {% set html = agent.smallThumbnail ? "<img class='border' src='" ~ agent.smallThumbnail ~ "'/>" : agentAsset %}
                        <option value="{{ agent.id }}" <% if(agent && {{ agent.id }} == agent.id) { %>selected<% } %> data-content="<span class='round-tabs two'>{{ html|raw }}</span><div class='name'>{{ agent.name }}</div>"></option>
                        }
                    {% endfor %}
                </select>
            {% else %}
                <% if(agent) { %>
                    <i class="fa fa-user" aria-hidden="true"></i>
                <% } %>
            {% endif %}
            <% if(agent) { %>
                <span class="assign-text"> 
                    {% trans %}Assigned To{% endtrans %} - &nbsp;
                </span>
                {% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
                    <a class="semibold" href="{{ path('edit_user') }}/<%= agent.id %>">
                {% else %}
                    <a class="semibold">
                {% endif %}
                    <%= agent.name.split(" ")[0] %>
                </a>
            <% } %>
        </span>
    </li>
    <li class="info">
        <% if(group) { %>
            <span class="badge badge-lg badge-default"><%= group %></span>
        <% } %>
        <span class="badge badge-lg badge-default"><%= formatedCreatedAt %></span>
        <span class="badge badge-lg badge-default"><%= totalThreads %> {% trans %}Replies{% endtrans %}</span>
    </li>
    <li class="priority">
        <span class="label priority-label" style="background-color: <%= priority.color %>; border: 1px solid <%= priority.color %>"><%= priority.name %></span>
    </li>
</ul>
</td>
</script>

<script id="ticket_quick_view_tmp" type="text/template">
<div class="col-sm-12 ticket-info-block">
<label class="information-block-title pull-left">
    <a href="<%= path %>">
        #<%= incrementId %>
    </a>
</label>
<span class="badge badge-lg">
    <%= formatedCreatedAt %>
</span>
<span class="badge badge-lg">
    <%= totalThreads %> {% trans %}Replies{% endtrans %}
</span>
<% if(lastReplyAgentName) { %>
    <span class="badge badge-lg">
        {% trans %}Last Reply{% endtrans %} - 
        {% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
            <a class="semibold" href="{{ path('edit_user') }}/<%= lastReplyAgentName.id %>">
        {% else %}
            <a class="semibold">
        {% endif %} 
            <%= lastReplyAgentName.name.split(" ")[0] %>
        </a>
    </span>
<% } %>
<% if(rating) { %>
    <div class="ticket-rating">
        <% for(i = 1; i <= 5; i++) { %>
            <i class="fa fa-star <% if(i <= rating) { %>yellow<% } %>"></i>
        <% } %>
    </div>
<% } %>
<div class="pull-right quick-view-navigation">
    <i class="fa fa-spinner fa-spin pull-left" aria-hidden="true" style="margin-right: 5px; font-size: 20px; display: none;"></i>
    <% if(previous) { %>
        <span class="label label-primary" data-id="<%= previous %>">
            <i class="fa fa-arrow-left"></i>
        </span>
    <% } else { %>
        <span class="label">
            <i class="fa fa-arrow-left"></i>
        </span>
    <% } %>
    <% if(next) { %>
        <span class="label label-primary"  data-id="<%= next %>">
            <i class="fa fa-arrow-right"></i>
        </span>
    <% } else { %>
        <span class="label">
            <i class="fa fa-arrow-right"></i>
        </span>
    <% } %>
    <span class="badge badge-danger delete" aria-label="Close" data-dismiss="modal">
        <i class="fa fa-times"></i>
    </span>
</div>
</div>
<div class="col-sm-12 ticket-info-block">
<div class="pull-left">
    <div class="pull-left">
        {% if user_service.checkPermission('ROLE_AGENT_MANAGE_CUSTOMER') %}
            <a style="float: left;line-height: 30px;" href="{{ path('edit_customer') }}/<%= customer.id %>">
        {% else %}
            <a style="float: left;line-height: 30px;">
        {% endif %}
            <span class="round-tabs three">
                <% if(customer.smallThumbnail != null) { %>
                    <img class='border' src="<%= customer.smallThumbnail %>" alt=""/>
                <% } else { %>
                    {{ customerAsset|raw }}
                <% } %>
            </span>
        </a>
    </div>
    <div class="ticket-info">
        <div class="ticket-info-row">
            {% if user_service.checkPermission('ROLE_AGENT_MANAGE_CUSTOMER') %}
                <a href="{{ path('edit_customer') }}/<%= customer.id %>">
            {% else %}
                <a>
            {% endif %}
                <strong><%= customer.name %></strong>
            </a>
            <i class="fa fa-chevron-left"></i>
                <a href="mailto:<%= customer.email %>" class="mailto-link"><%= customer.email %></a>
            <i class="fa fa-chevron-right"></i>
        </div>
        <div class="ticket-info-row">
            <span class="label colored" style="background-color:<%= priority.color %>"  data-toggle="tooltip" data-placement="top" title="" data-original-title="{% trans %}Priority{% endtrans %}">
                <%= priority.name %>
            </span>
            <span class="label colored" style="background-color:<%= status.color %>" data-toggle="tooltip" data-placement="top" title="" data-original-title="{% trans %}Status{% endtrans %}">
                <%= status.name %>
            </span>
            <% if(groupName) { %>
                <span class="label" data-toggle="tooltip" data-placement="top" title="" data-original-title="{% trans %}Group{% endtrans %}">
                    <%= groupName %>
                </span>
            <% } %>
            <% if(subGroupName) { %>
                <span class="label" data-toggle="tooltip" data-placement="top" title="" data-original-title="{% trans %}Team{% endtrans %}">
                    <%= subGroupName %>
                </span>
            <% } %>
            <% if(typeName) { %>
                <span class="label" data-toggle="tooltip" data-placement="top" title="" data-original-title="{% trans %}Type{% endtrans %}">
                    <%= typeName %>
                </span>
            <% } %>
            <% if(ticketLabels) { %>
                <% _.each(ticketLabels, function(ticketLabel) { %>
                    <span class="label-name" style='background-color:<%= ticketLabel.color %>' data-id="<%= id %>">
                        <%= ticketLabel.name %>
                        <span class="remove" data-id="<%= ticketLabel.id %>">x</span>
                    </span>
                <% }) %>
            <% } %>
        </div>
    </div>
</div>
<% if(agent) { %>
    <div class="pull-right">
        <div style="min-width: 160px;" class="assign-block">
            <div class="ticket-agent-details">
                <span class="round-tabs two">
                    <% if(agent.smallThumbnail != null) { %>
                        <img class='border' src="<%= agent.smallThumbnail %>" alt=""/>
                    <% } else { %>
                        {{ agentAsset|raw }}
                    <% } %>
                </span>
                <div class="agent-info">
                    Assigned To - 
                    <br>
                    {% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
                        <a class="semibold" href="{{ path('edit_user') }}/<%= agent.id %>">
                    {% else %}
                        <a class="semibold">
                    {% endif %}
                        <%= agent.firstName %>
                    </a>
                </div>
            </div>
        </div>
    </div>
<% } %>
</div>
<div class="col-sm-12 ticket-message-block">
<% if(lastReply) { %>
    <div class="ticket-thread">
        <div class="thread">
            <div class="col-sm-12 thread-created-info">
                <span class="info">
                    <%= lastReply.fullname %> {% trans %}made a last reply{% endtrans %}
                </span>
                <span class="text-right date">
                    <%= lastReply.formatedCreatedAt %>
                </span>
            </div>
            <div class="col-sm-12">
                <div class="pull-left">
                    <% if(lastReply.userType == "customer") { %>
                        {% if user_service.checkPermission('ROLE_AGENT_MANAGE_CUSTOMER') %}
                            <a style="float: left;margin-top:5px;" href="{{ path('edit_customer') }}/<%= lastReply.user.id %>">
                        {% else %}
                            <a style="float: left;margin-top:5px;">
                        {% endif %}
                    <% } else { %>
                        <% if(!lastReply.user) { %>
                            <a style="float: left;margin-top:5px;">
                        <% } else { %>
                            {% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
                                <a style="float: left;margin-top:5px;" href="{{ path('edit_user') }}/<%= lastReply.user.id %>">
                            {% else %}
                                <a style="float: left;margin-top:5px;">
                            {% endif %} 
                        <% } %>
                    <% } %>
                        <span class="round-tabs three">
                            <% if(lastReply.user && lastReply.user.smallThumbnail != null) { %>
                                <img class='border' src="<%= lastReply.user.smallThumbnail %>" alt=""/>
                            <% } else { %>
                                <% if(lastReply.userType == "customer") { %>
                                    {{ customerAsset|raw }}
                                <% } else { %>
                                    {{ agentAsset|raw }}
                                <% } %>
                            <% } %>
                        </span>
                    </a>
                </div>
                <div class="thread-body">
                    <div class="thread-info">
                        <div class="thread-info-row first">
                            <% if(!lastReply.user) { %>
                                <a><strong><%= lastReply.fullname %></strong></a>
                            <% } else { %>
                                {% if user_service.getCurrentUser().getRole() != "ROLE_AGENT" %}
                                    <a href="{{ path('edit_user') }}/<%= lastReply.user.id %>">
                                {% else %}
                                    <a>
                                {% endif %}
                                    <strong><%= lastReply.fullname %></strong>
                                </a>
                                <% if(lastReply.userType == 'agent') { %>
                                    <% if({{ app.user.id }} != lastReply.user.id) { %>
                                        <label class="user-type pull-right">
                                            {% trans %}Agent{% endtrans %}
                                        </label>
                                    <% } %>
                                <% } else if(customer.id != lastReply.user.id) { %>
                                    <label class="user-type pull-right">
                                        {% trans %}Collaborator{% endtrans %}
                                    </label>
                                <% } else { %>
                                    <label class="user-type pull-right">
                                        {% trans %}Customer{% endtrans %}
                                    </label>
                                <% } %>
                            <% } %>
                        </div>
                    </div>
                <div class="message <%= lastReply.threadType %>">
                    <%= lastReply.reply %>
                </div>
                <% if(lastReply.attachments.length) { %>
                    <div class="thread-attachments">
                        <% _.each(lastReply.attachments, function(file) { %>
                            <div class="attachment" data-toggle="tooltip" data-placement="top" title="" data-original-title="<%= file.name %>">
                                <a href="{{ path('download_ticket_attachment') }}/<%= file.id %>" target="_blank">
                                    <i class="fa fa-file <%= file.name.split('.').pop() %>"></i>
                                    <span>
                                        <%= file.name.split('.').pop() %>
                                    </span>
                                </a>
                            </div>
                        <% }) %>
                    </div>
                <% } %>
            </div>
        </div>
    </div>
<% } %>
roblourens commented 7 years ago

This looks correct now, after a couple grammar updates.