Is there a way to tell Prettier that the following "block" has a specific markup type? - prettier

I'm having issues using mjml where I want to specify inline CSS, but it's currently not supported by Prettier as far as I could tell.
The only way I found how to bypass this is using <!-- prettier-ignore --> but mjml is expecting this to be a CSS block (like <style>). So to make this work I would need to use /* prettier-ignore */ but it's not recognized by Prettier because it thinks I'm inside an XML block.
Is there a way to tell that this block is CSS? Something like
<!-- prettier-type: css -->
I'm sort of running in circle trying to fix this problem!

Based on the lack of answers, I suppose this is not possible and the only real way to fix this would be to add proper MJML support to Prettier.
In the meantime the following workaround can be used to allow using both inline CSS and the MJML online editor:
<!-- prettier-ignore -->
<mj-style inline="inline">
/** CSS here */
</mj-style>

Related

Edit SVG color in draw.io

I'm following this guide on editing imported svg's in draw.io but with no luck. I am not getting the style options after inserting the editableCssRules=.*; code on the svg itself.
Has anyone else experienced this? I have the latest version installed and have restarted my machine.
I'm expecting to see additional Fill options as the guide suggests.
If possible, please attach SVG image and add the whole SVG code (Ctrl+e) with inserted editableCssRules=.*; so I can see all the details.
Thanks,
Same problem here.
Here is the whole SVG code as requested :
editableCssRules=.*;aspect=fixed;html=1;points=[];align=center;image;fontSize=12;image=img/lib/azure2/general/File.svg;imageBackground=default;sketch=0;
The option editableCssRules just does what it says: it makes the specified CSS classes editables; in your case by using editableCssRules=.*; you are using a Regex expression to make all CSS classes in the SVG editable.
You are not seeing any options appear after modifying the style because with all probability the SVG you are using does not contain any CSS classes.
You will need to edit your SVG file and add the CSS classes that you need and refer to them in the paths, like so:
<style type="text/css">
.st0{fill:#000000;}
</style>
<path class="st0" d="YOUR_PATH_HERE"/>
Now, in draw.io import the SVG again and after adding the editableCssRules=.*; option to the style you should be able to edit its color, like so:

Better legibility of Thymeleaf template

I created a lot of Thymeleaf templates during the last weeks, using both html5 and textual mode. In these templates I need to use a lot of th:each statements that iterate over the Context variables.
On these variables I ofter access their getters which in turn return other objects which I have to use getters on and so on.
In order to process the data returned I need to apply stuff like strings.defaultString(...)
All these combined statements make it difficult to read and comprehend what is going on. Many lines of my templates are so long that they can't be read without scrolling horizontally.
I searched for best practices but only found some that describe how to create "base templates" that give general advice on using Thymeleaf in combination with Spring or mention how to include common fragements.
Is there best practice how to format / wrap Thymeleaf statements without causing negative effects on created html or text (for example unwanted line breaks) ?
You can create variables using th:with so that you dont have to do frequent objA.propB.propC. So you assign th:with="propB=${objA.propB}"
Then creating reusable fragments with parameters in another good approach so any HTML which is getting repeated can be extracted into a fragment and the data required for that fragment can be passed as argument.
Update:
<div class="profile-user-info">
<th:block th:insert='~{::profileInfoRow("Name", ${user.name}) }' />
<th:block th:insert='~{::profileInfoRow("Age", ${user.age}) }' />
<th:block th:insert='~{::profileInfoRow("Location", ${user.location}) }' />
</div>
<div th:fragment="profileInfoRow(label, value)">
<div class="profile-info-row">
<div class="profile-info-name">[[${label}]]</div>
<div class="profile-info-value">[[${value}]]</div>
</div>
</div>
So above is a simple way you can create a reusable section of HTML and then use thymeleaf directives to include the reusable section by passing in the values for dynamic arguments.

Can XSLT be used to apply CSS styles?

I have some XML and a very small XSLT to convert that into HTML. When I import my XML content in InDesign using the XSLT, I can see the styles are applied to the elements on the left hand browsing side but, when I drag and drop the elements in the InDesign frames, nothing is happening. The content is flowing normally.
My question is, in InDesign, is XSLT getting used only for sequencing the elements or can we use XSLT to apply the styles (like font-size, line-spacing etc.) as well for elements?
Also, if you can send me any sample XSLT for converting an XML to HTML tags or any example, that will be great.
In general, formatting in InDesign has nothing in common with CSS styles -- that is a HTML construction, not an XML one. You can indeed only reorder elements (and other element-wise stuff, such as removing, replacing, or adding tags).
Formatting can be applied to the tags after you imported/translated your XML using Map Styles To Tags (or Map Tags to Styles; I don't think I've ever used either).
You can use HTML within XLST so, if you have something like:
<xsl:value-of select="node"/>
Then this can also be written like:
<div class='style'><xsl:value-of select="node"/></div>
Or you can use inline CSS like:
<div style='color:red;'><xsl:value-of select="node"/></div>
Hope this helps!

Play 2, how to reuse a HTML code with a tag

In Play! Framework v. 1.x there was such thing like a 'tag' where was possible to reuse some thml/template code.
In Play! Framework v 2.x, for me it is not clear still how it's going to be used (here).
For example, I want to use tag to define a header for my site (in order not to repeat myself, but just include the header every in the pages where I need it).
Could someone explain me / show how to use tags, or whatever I should use to include the header or any block of html/template code.
You showed us a sample and you are asking for sample :)
That's easy, create a common view in views.tags package (remember to leave first line empty if you're not gonna to pass any params! also remember to add brackets after tags name):
/app/views/tags/header.scala.html
<div id="header">
<h1>Hello World!</h1>
</div>
So you can 'include' it in any other view just with:
<body>
#tags.header()
Some other content
</body>

How can I sanitize user input but keep the content of <pre> tags?

I'm using CKEditor in Markdown format to submit user created content. I would like to sanitize this content from malicious tags, but I would like to keep the formatting that is the result of the markdown parser. I've used two methods that do not work.
Method one
<!--- Sanitize post content --->
<cfset this.text = HTMLEditFormat(this.text)>
<!--- Apply mark down parser --->
<cfx_markdown textIn="#this.text#" variable="parsedNewBody">
Problem For some reason <pre> and <blockquote> are being escaped, and thus I'm unable to use them. Only special characters appear. Other markdown tagging works well, such as bold, italic, etc. Could it be CKEdit does not apply markdown correctly to <pre> and <blockquote>?
Example: If I were to type <pre><script>alert("!");</script></pre> I would get the following: <script>alert("!");</script>
Method two
Same as method one, but reverse the order where the sanitation takes place after the markdown parser has done it's work. This is effectively useless since the sanitation function will escape all the tags, malicious ones or ones created by the markdown parser.
While I want to sanitize malicious content, I do want to keep basic HTML tags and contents of <pre> and <blockquote> tags!--any ideas how?
Thanks!
There are two important sanitizations that need to be done on user generated content. First, you want to protect your database from SQL injection. You can do this by using stored procedures or the <cfqueryparam> tag, without modifying the data.
The other thing you want to do is protect your site from XSS and other content-display based attacks. The way you do this is by sanitizing the content on display. It would be fine, technically, to do it before saving, but generally the best practice is to store the highest fidelity data possible and only modify it for display. Either way, I think your problem is that you're doing this sanitization out of order. You should run the Markdown formatter on the content first, THEN run it through HTMLEditFormat().
It's also important to note that HTMLEditFormat will not protect you from all attacks, but it's a good start. You'll want to look into implementing OWASP utilities, which is not difficult in ColdFusion, as you can directly use the provided Java implementation.
Why don't you just prepend and append pre tag after parsing?
I mean, if you only care about first an dlast pre and you dont have nested pre's or similar. If you cfx tag clears pre, make new wrapper method which is going to check if <pre> exists and if not, add it. Also if you use pre tags I guess new line chars are important, so check what your cfx does with those.
Maybe HTMLEditFormat twin HTMLCodeFormat is what you need?