Here is roughly the kind of code that I have.
<body>
<p>
...
</p>
<script>
function func()
{
...
for(...)
{
...
}
}
</script>
<p> ... </p>
</body>
HTML by itself indents properly, but when I put in the javascript everything screws up.
How do I deal with this?
You could try one of the multiple modes:
https://emacswiki.org/emacs/MultipleModes
http://wikemacs.org/wiki/JavaScript#Mix_html_and_Javascript
https://github.com/purcell/mmm-mode
https://github.com/vspinu/polymode
https://github.com/fgallina/multi-web-mode
Their goal is to have more than one mode at the same time in the same buffer, specially html and javascript.
What I tend to do is have blank lines in between my script tags and then switch over to javascript mode. The html would look like this with the blank line padding
<script type="text/javascript">
//some javascript
</script>
That seems to allow correct coloring and indenting. I also like to use js3-mode personally as it adds a bit more functionality than emacs' default javascript styling.
Related
I'm trying to include my Adsense code from a file called sda.html located in the home folder of the server.
I'm using this code to include it:
<div w3-include-html="../../sda.html" class="section_title text-center"></div>
from this source: https://www.w3schools.com/howto/howto_html_include.asp
but idk I feel there's something wrong.
btw my site is only HTML and js, so if there is any other better option I'll be glad to hear it.
I also checked this one down:
<!--#include virtual="/menu.shtml" -->
but I didn't use it, since I have no clue how my next server will operated. so I skip it.
and this one here:
<object data="../../sda.html"></object>
I prefer this one, but I have no control of the look of it, I couldn't center or anything
the smaller the code the better it is.
Does sda.html contains only adsense code or whole part of the page?
The includeHTML function from w3school is not very good. I suspect the issue you are having is that that function uses innerHTML to set content and innerHTML doesn't execute <script> tags with content: check "Security considerations" on MDN page.
To workaround this you can do the following: remove <script> tags from sda.html and then, once you imported HTML run window.adsbygoogle.push({}) for each new ad unit. Example:
Add adsbygoogle.js tag in of your page:
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Insert ad into a div with id div-with-ad.
const divWithAd = document.querySelector('#div-with-ad');
divWithAd.innerHTML = `
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-format="fluid"
data-ad-layout="in-article"
data-ad-client="ca-pub-0123456789101112"
data-ad-slot="9876543210"></ins>
`;
adsbygoog.push({});
So, I have a script with both HTML and javascript inside:
<script>
<br>
window.onload = myFunction;
<br>
function myFunction() {
// Do something
}
<br>
</script>
Obviously, the HTML dont work, but can I remove the HTML tags in scripts somehow? With the javascript code still working. (and not by just going into the code and removing the HTML myself). Is there a way to make the HTML go away or be invisible to the script?
(I've tried just commenting it out with the "< ! - -" and "- - >" but it doesn't work)
Edit: the reason I'm wondering is because I have a weird coding teacher... and he told me you could do stuff like that but I can't get it to work. So I just want to know if it's actually possible.
Commenting the code using javascript comment tags /*
<script>
/*
<br>
window.onload = myFunction;
<br>
*/
function myFunction() {
// Do something
}
<br>
</script>
This question already has answers here:
How to display raw HTML code on an HTML page
(30 answers)
Closed 8 years ago.
I'm writing a C++ Style Guide for my company in html/css/javascript. I'm quite irritated with html as it treats anything between < and > as html tag and thus processes them as well. As a result of which my code (which I put in the style guide) doesn't look as such. Here is an example:
<pre>
std::vector<std::string> get_project_names();
template<typename Printable>
void print(Printable const & item);
template<typename FwdIterable, typename Predicate>
FwdIterable find_if(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>
and I want the browser to render it exactly like that, but it doesn't render so, e.g Chrome doesn't show <std::string> part, and IE 8.0 capitalize <std::string> as <STD::STRING> (and all such template codes).
I don't want any kind of interference by html engine. Is there any simple way to achieve what I want? Any polite way to tell the browser to not modify my code?
Note that replacing < with < and > with > would work, but it is cumbersome to write it everytime I write a template code. It also makes my code difficult to read in the source code of the html. So I'm looking for a simple solution.
The notion of a "polite way to to tell the browser to not modify (parse) my code" is precisely what XML's CDATA does. Nothing more, nothing less.
CDATA does not exist in HTML, so there is no way in HTML to treat <std:vector> as anything other than on opening tag for the (non-existent) std:vector element.
The normal way to do this is a server-side transformation. Now if you aren't generating your HTML server-side, and are instead writing it by hand, you can make your life just a dash easier with a client-side transformation like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Page Title</title>
<script src="http://coffeescript.org/extras/coffee-script.js"></script>
</head>
<body>
<pre><script type="text/coffeescript" >document.write "
std::vector<std::string> get_project_names();
".replace('<','<')
</script></pre>
</body>
</html>
Here I used CoffeeScript because of its multiline string capability which is coming in ES6 for regular JavaScript. It makes it easy to just drop in your code between the boilerplate lines.
Now I know full well even this solution is lacking! If your inserted code contains a " you're out of luck. And it doesn't escape ampersands.
Bottom line is that there is no CDATA, so no "simple" solution exists. A transformation, client-side or server-side, is required.
Have you tried markdown?
I've been dealing with this particular problem for years, and it's always been frustrating. I've always appreciated the simplicity and elegance of Markdown, so I did a little research to see if there was any way to use Markdown to build an HTML document.
Thing is, code samples sometimes involve HTML, yet HTML is the language we're using to write style guides and API documentation, so my thought was that if we wrote the API documentation and style guides in Markdown, we'd eliminate all of the conflicts between HTML and the syntax of other languages.
I found Strapdown.js, which is a library that allows you to create a Web page with pure Markdown. The library then compiles it to HTML and renders it on the page client side. We put together the API documentation for one of our products using this library, and we published it as a GitHub page.
Here's a small, concise example:
<!DOCTYPE html>
<html>
<title>JavaScript API</title>
<xmp theme="united" style="display:none;">
## Print the name
Print the user's name:
```javascript
function printName(name) {
alert(name);
}
```
</xmp>
<script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
</html>
Everything inside the <xmp> tags gets compiled to HTML.
Note: The XMP tag has been deprecated for some time as per the Mozilla HTML documentation on XMP. Thus, you may want to either hack the code to make it use PRE or CODE, or you may want to consider using the lower-level Marked library that was used to build Strapdown.js. I filed an issue with the Strapdown.js team.
For that you can use this
<pre>
std::vector<std::string> get_project_names();
template<typename Printable>
void print(Printable const & item);
template<typename FwdIterable, typename Predicate>
FwdIterable find_if(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>
This would be encoded and you'll get the result that you want.
Here is the fiddle for that: http://jsfiddle.net/afzaal_ahmad_zeeshan/7B9xB/
JavaScript code
The JavaScript method of doing this would be simple, you can convert the whole code to a String variable.
As this
var string = "content here";
Then apply this,
string.replace('<','<').replace('>','>');
Convert all the characters and then have then rendered by the Browser.
http://jsfiddle.net/afzaal_ahmad_zeeshan/7B9xB/1/
For my book I used http://markup.su/highlighter/ syntax highlighter. Paste the code into it, generate highlighted code, and paste the latter into the HTML document. Worked pretty well. Here's a fiddle with your code: http://jsfiddle.net/6GTs2/.
Here's your code highlighted for HTML:
<pre style="background:#000;color:#f8f8f8">std::vector<std::string> <span style="color:#89bdff">get_project_names</span>();
<span style="color:#99cf50">template</span><<span style="color:#99cf50">typename</span> Printable>
<span style="color:#99cf50">void</span> <span style="color:#89bdff">print</span>(Printable const & item);
<span style="color:#99cf50">template</span><<span style="color:#99cf50">typename</span> FwdIterable, <span style="color:#99cf50">typename</span> Predicate>
FwdIterable <span style="color:#89bdff">find_if</span>(FwdIterable begin, FwdIterable end, Predicate pred);
</pre>
I'm experimenting with the < pre> and < code> tags in html 5 as I would like to include some code snippets on my website. I'm using the page below as a test page but it is not displaying anything. Any reason why?
<body>
<div style="color:#000000">
<pre>
<code>
<script type="text/javascript">
$('#inputField').hide();
</script>
</code>
</pre>
</div>
</body>
It was my understanding that using these new tags would negate any code that they contain within however this does not appear to be the case.
Cheers,
J
These tags are only for "decorational" purposes. Code within will still be executed. If you want it displayed you have to convert at least the <script> tag to html:
<script type="text/javascript">
Then the JavaScript code inbetween will be shown.
You don't need both though, I would use <pre> (which is per default a block element), <code> is intended for inline use.
Remove script tag:
<body>
<div style="color:#000000">
<pre>
<code>
$('#inputField').hide();
</code>
</pre>
</div>
</body>
It was my understanding that using these new tags would negate any code that they contain
They don't. They tell user agents to present the data as code. So it will have font changes, white space will be significant, it should be skipped over by translation software and so on.
Markup still takes effect (so you can add elements to style, or link the code to other places, and so on) so you still need to replace HTML special characters (<, &, etc) with their respective entities (<, &, etc).
This would work if you take the script tags out.
These code tags only change the font of the text inside to a monospace font, however it does not override the interpretation of other tags (or even php tags).
A better way is to use CSS to get color highlighting, or javascript libraries.
Currently I'm working on a Project with Handlebars (JS Template Engine) and I'm using eclipse for development.
The problem is, that eclipse doesn't offer syntax highlighting for my Handlebars-Templates. My Templates are enclosed in tags. Syntax highlighting in works as expected.
Screenshot:
Is it possible, that Eclipse also highlights this code (at the best with HTML Syntax Coloring)?
If you are using PHP, you can fool Eclipse by adding empty php tag:
<scrip<?php ?>t type="tmpl_handlebars" id="tmpl_places">
<article>
<h1>
...
</h1>
</article>
</script>
You would have to find a plug-in which supports that template engine. The HTML Editor provided by Eclipse uses the value of the type/language attributes to find the classes that provide syntax coloring, content assist, etc. The possibility is there, but out of the box, it only provides for JavaScript.
If you are ready do write a little bit of javascript, you can do this. I don't know the framwork(s) that you are using, so I will suppose that you have jQuery, but you can use the idea without using jQuery if you don't want to.
First, write all your tags that serve as template in divs with the "tmpl_handlebars" css class instead of scripts:
<div class="tmpl_handlebars" id="tmpl_places">
<article>
<h1>Hello, World!</h1>
<p>This is a template...</p>
</article>
</div>
Then, when your page has loaded, dynamically replace the div tags with the script tags, and transfer the id and the content of the div tags to the script.
With jQuery you just have to add this small script in your html head.
$(function() {
$(".tmpl_handlebars").each(function() {
var $this = $(this);
var children = $this.children().detach();
var id = $this.attr("id");
$this.replaceWith(
$('<script type="tmpl_handlebars"/>')
.attr("id", id)
.append(children);
);
});
});
This may work out of the box, but as I'm not a specialist of mustache and handlebars, I don't know exactly when they process the DOM to find the templates, so if you want to be perfectly safe, you should do this third step: Remove the script tags that include these libraries from the static html of your head, and instead, add them dynamically with javascript after the processing of the divs, so your dom is ready when the scripts arrive.
Before the last }); in the code the divs processing, add the following lines to add your scripts:
$("head").append('<script type="text/javascript"'
+ 'src="**LOCATION_OF_DYNAMICALLY_LOADED_FILE**"></script>'");
//etc...
Similar to #Neparkiraj's answer.
If you are using Django, you can add an empty tag to (I believe) "trick" Eclipse into just thinking the line is just "bad" html. Subsequent lines will then be highlighted with html syntax:
<scrip{{NONEXISTANTVAR}}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
As the tag is empty, <script type="tmpl_handlebars" id="tmpl_places"> will be perfectly rendered in the final document. Note that, using Django also likely means this code sits in a {% verbatim %} block, so you can combine this code to get:
<scrip{% verbatim %}t type="tmpl_handlebars" id="tmpl_places">
<article>
...
</article>
</script>
{% endverbatim %}
All of this is kind of ugly, but leads to both correct HTML highlighting in eclipse and correct rendering in the document.