I am trying to use the coffeescript in jade and ### doesn't seem to work. and the block level comment of jade within coffeescript doesn't allow me to comment a set of lines. it just allows a complete block based of indentation commented. any suggestions???
thanks
### comments seems to work for me (don't forget this is for multilines comments so you need to close them):
!!! 5
html(lang='en')
head
title App
body
:coffeescript
### Comment ###
require "index"
###
Comment 2
###
compiles to:
<!DOCTYPE html>
<html lang="en">
<head>
<title>App</title>
</head>
<body> <script type="text/javascript">
/* Comment
*/
(function() {
require("index");
/*
Comment 2
*/
}).call(this);
</script>
</body>
</html>
Related
I'm trying to add this Bootstrap 5 starter template as a snippet on vs code but with no success.
I've tried to escape all " characters using \ but still does not work.
I'm not familiar with JSON files.
Do you know how to add this code as a snippet in vscode?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">
<title>Document</title>
</head>
<body>
<!-- Optional JavaScript -->
<!-- Popper.js first, then Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
</body>
</html>
There are a few talking points on your approach.
JSON strings are not string literals, meaning you can not simply add a new line to them, you have to use a \n character where applicable; if you wish to keep it all in one string:
"body" : "<!doctype html>\n<html lang="en">\n<head> .... etc"
You can not use a string delimiter in your snippet without escaping it, that's not snippet or even vscode specific, that's just how most 'language' rules are:
"body" : "<html lang="en">"
^ ^
When you do this it effectively means you want the body to be: <html lang= because you ended the string and then restarted it after en
Although you can keep it in a single string value, a better approach, for readability at least, is to use an array of values:
"body": [
"<!doctype html>",
"<html lang=\"en\">",
.. etc
]
Full snippet will look like the following:
"Bootstrap 5": {
"description": "Bootstrap 5 starter template",
"prefix": "bootstrap",
"body": [
"<!doctype html>",
"<html lang=\"en\">",
"\t<head>",
"\t\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">",
"\n\t\t<!-- Bootstrap CSS -->",
"\t\t<link rel=\"stylesheet\" href=\"https://stackpath.bootstrapcdn.com\" />",
"\n\n\t\t<title>Document</title>",
"\t</head>",
"\t<body>",
"\t\t$0",
"\n\n\n\t\t<!-- Optional JavaScript -->",
"\t\t<!-- Popper.js first, then Bootstrap JS -->",
"\t\t<script src=\"https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js\" integrity=\"sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo\" crossorigin=\"anonymous\"></script>",
"\t\t<script src=\"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js\" integrity=\"sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/\" crossorigin=\"anonymous\"></script>",
"\t</body>",
"</html>"
]
}
Syntax:
$0 means 'end here'
\t means 'add a tab here'
\n means 'add a new line here'
If you don't want to add new lines or new tabs you don't have to, if you have the setting to 'format on save' set to true it will correct itself, but it does look better to include them.
Resources
vscode has a thorough overview of how to create custom snippets and shorcuts and advanced snippets using variables; please review for further guidance here
I am new playwork. I have been going through the tutorials and samples provided the playframework.
I could successfully render helloworld application provided by playframework samples.
I have few doubts regarding the rendering part of main.scala.html.#
This is the default program which I got from samples/helloworld
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.6.4.min.js")" type="text/javascript"></script>
</head>
<body>
<header>
#title
</header>
<section>
#content
</section>
</body>
</html>
Here when I commented out the #content under section tag , I am not able to see the the fields.
Now my question is, where is #content is mapped to the Form field?
I created another structure for my layout and added the #content to the content section. but it does not fit into that
so now my question is #content where is that defined that it is div container and has got some height and weight and all?
I could not understand. Please help me.
Pleae find my customized code below
#(title: String)(content: Html)
<!DOCTYPE html>
<html>
<head>
<title>#title</title>
<link rel="stylesheet" media="screen" href="#routes.Assets.at("stylesheets/main.css")">
<link rel="shortcut icon" type="image/png" href="#routes.Assets.at("images/favicon.png")">
<script src="#routes.Assets.at("javascripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>
<body>
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>
<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
#content</div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>
</body>
</html>
Introduction
From Template parameters in the Play Template documentation, the meaning of the first line is described. Here, we see that two parameter groups are required.
The two parameter groups are:
a String parameter containing the title
a Html parameter containing some HTML content
Usage
To use this template, two parameter groups have to be supplied. In the context of the helloworld application, it is called from app/views/index.scala.html like this:
#main(title = "The 'helloworld' application") {
<h1>Configure your 'Hello world':</h1>
... more HTML elided
}
This pattern is described in http://www.playframework.com/documentation/2.2.x/ScalaTemplateUseCases, where HTML is injected into a template.
main.scala.html contains the template (content contains the HTML to be injected).
index.scala.html contains an example of injection into this template.
Note that calling #main(...) calls the template that is defined in main.scala.html.Similarly, calling #my_template(...) would call the template defined in my_template.scala.html.
In this case, the HTML for the form is defined inside index.scala.html.
Calling the Template
Finally, the root template is called from a controller. For the helloworld application, the template defined in index.scala.html is invoked by the code
def index = Action {
Ok(html.index(helloForm))
}
This is where the form object is injected into the template.
Following coffee-script code:
try
any_error_here
catch err
alert err.stack
Gives following stack trace:
ReferenceError: any_error_here is not defined
at eval (coffeescript:5:3)
How to get coffeescript line number for this stack (line 2)?
Here is simple html with same question:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Coffee-script stack trace problems</title>
<script type="text/javascript" language="javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body id="dt_example">
<script type="text/coffeescript" language="javascript">
try
any_error_here
catch err
alert err.message+'\n'+err.stack + '\n\nWhat is coffeescript line number for this stack?'
</script>
</body>
</html>
This sounds like a problem for source maps.
When you compile your CoffeeScript, you can generate a source map by specifying the -m option:
coffee -c -m so.coffee
In browsers that support source maps (e.g. Chrome), the CoffeeScript file will appear in the Sources tab, and errors and log statements will refer to the corresponding line in the CoffeeScript file.
For more information, check out the HTML5 tutorial on source maps, and a short article about using source maps with CoffeeScript.
If you have a source map, you can also use it to parse a stack trace string and refer back to the original uncompiled file as outlined in this question.
I usually have \let\phi\varphi in preambles of my LaTeX files, for aesthetics reasons. Is it possible to do something similar in MathJax? I tried defining macros
MathJax.Hub.Config({TeX:{Macros:{phi:"\\varphi"}}})
but it seems to have confused MathJax (no math was rendered on the page at all). What is the proper way to do this?
What you have done should work, so I suspect something is typed wrong or in the wrong place in your file. Here is a complete working example file:
<!DOCTYPE html>
<html>
<head>
<title>MathJax Macros Configuration</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({TeX: {Macros: {phi:"\\varphi"}}});
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML"></script>
</head>
<body>
phi \(\phi\) and varphi \(\varphi\) should both be the same.
</body>
</html>
I don't understand how to use XUI tween. On the xui website, they give the following example code:
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
What is that supposed to do? I created a <div id="box"></div>, ran the line of js code above, but nothing happened. Here's my complete code:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="xui.min.js"></script>
<script type="text/javascript">
x$('#box').tween([{left:'100px', backgroundColor:'green', duration:.2 }, { right:'100px' }]);
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
Nothing happens...
So, XUI's tween seems to be a work in process. In fact, in the master branch code on GitHub you find:
// queued animations
/* wtf is this?
if (props instanceof Array) {
// animate each passing the next to the last callback to enqueue
props.forEach(function(a){
});
}
*/
So, in short, the array-based tween properties appear busted at the moment. In addition, XUI's tween seems to be a little flakey when dealing with properties that are not currently set on the DOM element. (For example, setting the background-color on a transparent element turns it black...rather than the intended color.)
That said, the single tween and callback work well on previously set properties. So take a look at the following (and excuse the inline css):
<html>
<head>
<script type="text/javascript" src="http://xuijs.com/downloads/xui-2.3.2.min.js"></script>
<script type="text/javascript">
x$.ready(function(){
setTimeout(function(){
x$('#box').tween({'left':'100px', 'background-color':'#339900', duration:2000}, function(){
x$('#box').tween({'left':'500px', duration:2000});
});
}, 500);
});
</script>
</head>
<body style="position:relative;">
<div id="box" style="position:absolute;top:50px;left:500px;width:100px;height:100px;background-color:#fff;border:1px solid #000;">the box</div>
</body>
</html>
Because #box now has a css background-property and left position explicitly set, it is relatively easy to produce an effect similar to the one desired.
One-half second after the page loads, #box should spend 2 seconds moving from left:500px to left:100px while turning the background color from white to green. Then, using the callback, #box moves back to its original position at left:500px--taking another 2 seconds to get back.
Obviously, this does not answer your exact question but for those (like me) who stumble upon this, it provides a workaround for the time being.