In Atom-editor i am missing syntax highlighting for HTML in es6 Template strings like:
`string text`
I use atom-dark-syntax and have language javascript installed and up to date but it looks like:
Any ideas?
You can use language-javascript-plus.
You can then do:
let template = /*html*/`
<div>will have syntax highlighting</div>
`;
Related
I'm progressively migrating an existing Symfony application to VueJS.
The issue I recently discovered is the {{ stuff }} markup are always interpreted by VueJS, even if the content come from a rendered twig variable.
To avoid this, I would like to extends the html escaper to replace { and } by the respective { and } html codes.
How can I do that properly? The escaping is inside a twig_escape_filter without a service I can override.
I also tried to make a custom escape strategy guesser, returning my vue escaping, itself calling the twig_escape_filter with html escaping before replacing the needed characters. All my source code was escaped. :-D
Thanks for the help.
In fact you could solve this problem in your javascript as simple as that:
import Vue from 'vue';
Vue.options.delimiters = ['${', '}'];
Now you can use double brackets ({{ }}) for twig like you did before and ${ } for VueJs.
EDIT: What you want to do is impossible. You can indeed convert {{ }} to its corresponding html entities using a simple filter like this:
new \Twig_Filter('yourFilter', function ($string) {
return htmlentities($string, ENT_HTML5);
}, ['is_safe' => ['html']])
but since Vue runs on top of your rendered html, the conflict you present will still occur (because html will render these html entities as brackets).
Your only solution is to use a more specific delimeter for your Vue like this one, to avoid this conflict:
Vue.options.delimiters = ['$vue{', '}'];
I'm working in an angular app where the JSON documents i'm getting includes several object. But while fetching the posts contents it also includes the HTML tags (i.e <p>) inside my angular brackets {{}} the problem here is i want only the contents not the HTML tags. Either give me a solution to get rid of that or tell me how to use html tags inside {{<p> hello <p>}} . I want to get an output of angular to show the paragraphed "hello" instead of <p>hello<p>.
Give me a solution to ge an output as hello instead of <p>hello<p>
thanks in advance!
Thanks for the response!
I Used the angular binding ng-bind. That working fine for me. I've used
<p ng-bind-html="post.name"></p> . Now the problems solved :)
I'm not sure if there is a 'best practice' solution for this, I don't think angular is currently handling this. Try using a function that strips the html tags like this:
{{stripInput(inputObject)}}
stripInput(html) {
var tmp = document.createElement("DIV");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
credit to this post. Some other good answers are there if this doesn't work :)
I have my script.php file in project. It contains javascript, but I wanted it to ne created dynamicly, based on server-side data.
I setted it's Content-type to text/javascript with php, but PhpStorm does not see it as javascript file. So I loose javascript syntax hightlighting, error detection, live templates...
How can I force PhpStorm to see that .php file as javascript file?
You could make a naming Convention for this type of file.
Something like
foo.js.php
bar.js.php
baz.js.php
And then go to Options ALT + F7, navigate to File Types, and register *.js.php to javascript
What you are trying to do sounds like bad practise.
You maybe want to have something like this:
A real JS File which is compileable by Closure Compiler or something like that, which provides "bootstrap" functions, which take your values as parameter.
And if you write this in your template.php, everything is fine for PHP Storm:
<script>
doFoo(<?= $myFirstValue ?>, <?= $myFirstValue ?>);
</script>
Maybe you can work with data attributes in Your HTML which i think is cleaner then inline script tag.
Also take a look here: https://softwareengineering.stackexchange.com/a/126678/122683
Settings | Template Data Languages
Find your file there and assign JavaScript in right column to it (or whole folder --then it will be applied to all files in that folder and subfolders).
This will tell IDE to use JavaScript instead of default HTML as outer language for that file.
You can use the <<<JS heredoc syntax to make PhpStorm highlight a specific part of your file as Javascript. For example:
<?php
echo 'This is using PHP syntax highlighting';
echo <<<JS
<script>document.write('This is using JavaScript highlighting');</script>
JS;
You can also use file-specific language injection with ALT+ENTER, also see http://blog.jetbrains.com/phpstorm/2013/06/language-injection-in-phpstorm/ for further details on that.
You can also use the built-in Language Injection of IntelliJ (which is the platform on which phpStorm is built). For that, just mark the part of your file then press ALT + ENTER and use "Inject Language/Reference".
How do you force handlebars.js to ignore (and not render) templates?
It's possible to escape the line with backslash
\{{>partialName}}
It's not mentioned in the documentation, but a look at the source-code documentation revealed this technique.
HTML entity might be a solution if you just wang to display your brackets. Try { and }.
I have a custom Drupal 7 module that prints out the contents of a form, parses it and replaces all the form elements with equivalent divs, then prints out the HTML using DOMDocument().
This is then run through wkhtmltopdf to generate a PDF. I also have a little preg_replace that converts all occurrences of textarea/input to .div-textarea/.div-input in some inline CSS.
The issue, however, is that the default Drupal CSS files and the CSS files that are included in the custom theme are unable to be processed by this regex, because the drupal_get_css() function returns <link> tags and CSS's #import rule.
So the question is: do you know how I can get Drupal's theme output to print the actual raw contents of the CSS files in the HTML rather than these stylesheet links so that I can run the replacement function over it?
Or are there any better ways of copying CSS rules from one element/class to another?
I did this using a php funciton: file_get_contents
Then your code looks something like:
$css = file_get_contents(drupal_get_path('theme', 'my_theme') . 'css/my_css.css');
Then you can print that css in any template or append to any string to get your output.
Edit:
To get a list of all css files run: $css_list = drupal_add_css();
Once you have the CSS loaded as a string (see #danielson317's answer for a good example of how to do this) add to the head using drupal_add_html_head().
If you add the second key param, you can run your regex using hook_html_head_alter().