Improve colour differences for HTML/MJML

[arcticicestudio]

Related to the comment of @caseymhunt in issue #2. The HTML/MJML color for attribute names and the associated value is hard to distinguish from the normal text content.

Possible solutions:

1) Attribute names are colored lime and the associated values are colored aqua, quoted string begin- and end symbols are blue

• :+1: Better element differentiation
• :-1: Conflicts with JavaScript function color
• :fist: Can disrupt the overall theme color logic/appearance

You can check out the improvement/ghi-3-testbranch-solution-1 test branch.

2) Only change the quoted string begin- and end symbols to blue to mark better visualize the start and end of a attribute value. Normal text is not effected by this.

• :+1: Better delimitation differentiation between normal text and attribute elements
• :-1: Attribute and text colors are still the same

You can check out the improvement/ghi-3-testbranch-solution-2 test branch.

3) Only change the color of the attribute values to light-blue to differ from normal text.

• :+1: Better color differentiation between normal text and attribute values
• :-1: The tag, attribute name and attribute value colors are very similar and difficult to distinguish

You can check out the improvement/ghi-3-testbranch-solution-3 test branch.

3.1) In addition to solution 3, use bold font style for attribute names for better differentiation

• :+1: Better color differentiation between attribute name and value
• :-1: It might seem "overloaded"/"chuncky" and may disturb/distact the coding flow

You can check out the improvement/ghi-3-testbranch-solution-3.1 test branch.

3.2) This solution is a possible workaround to find a unified way for the PR [#4], please read the PR conversation for more information.
In addition to solution 3, use bold font style for tag names and underline attribute names for better differentiation

• :+1: Better differentiation between attribute name and value
• :+1: Better emphasis for tag names
• :-1: It might seem "overloaded"/"chuncky" and may disturb/distact the coding flow
• :fist: Maybe the tag, attribute name and attribute value colors are similar and difficult to distinguish

You can check out the improvement/ghi-3-testbranch-solution-3.2 test branch.

[caseymhunt]

I like this quite a bit- do you have a branch I can pull down and test this?

[arcticicestudio]

Updated the initial post, may add some more solutions. I will push some test branches tomorrow, it's late here, I have to get up early tomorrow for work ;)

[arcticicestudio]

Pushed test branches for all possible solutions, please read the updated the initial post for branch names.

[arcticicestudio]

I will stay with the solution 3.2 (improvement/ghi-3-testbranch-solution-3.2).

[arcticicestudio]

I've released version 0.16.0 which includes the merged solution.