After accidentally using a CSS selector in an HTML template I started wondering if there is a template language or an extension to one that would allow this syntax, and whether it would be useful. So instead of writing this:
<div id="mydiv">
<div class="first column">1</div>
<div class="second column">2</div>
</div>
We could write it like:
<div#mydiv>
<div.first.column>1</div>
<div.second.column>2</div>
</div>
Does something like this exist?
Maybe you mean something like Jade?
It is an HTML preprocessor.
The following:
doctype 5
html(lang="en")
head
title= pageTitle
script(type='text/javascript')
if (foo) {
bar()
}
body
h1 Jade - node template engine
#container
if youAreUsingJade
p You are amazing
else
p Get on it!
Will be translated to:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Jade</title>
<script type="text/javascript">
if (foo) {
bar()
}
</script>
</head>
<body>
<h1>Jade - node template engine</h1>
<div id="container">
<p>You are amazing</p>
</div>
</body>
</html>
Also, it is not exactly what you're asking, but you may like Zen Coding. It is a plugin to code HTML at high-speed. GIF showing what it does:
It's basically:
Write pseudo-html.
Hit the shortcut.
Get full HTML.
?????
Profit!
You should check with your editor if it can support this. FWIW, I use this in VIM and it's awesome.
Maybe haml will fit your needs? It looks very similar.
There's a tool that uses a similar (though not identical) syntax called Zen Coding. You type this in your Zen Coding enabled editor:
div#page>div.logo+ul#navigation>li*5>a
... and get it expanded to:
<div id="page">
<div class="logo"></div>
<ul id="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
This differs from what you describe in that it doesn't require a preprocessor to run the template, it's just an editor helper to compose the final HTML. It may suit your needs or not.
Related
PUG is being compiled into HTML using GULP.
If you are using a gulp-pug and use the Pretty option to true, the code is composing strangely.
I've solved the problem with the gulp-html-beauty, and the only thing that bothers me.
the current situation
<div class="box"><strong class="title">믹스인 만들기</strong>
<ul>
what i want
<div class="box">
<strong class="title">믹스인 만들기</strong>
<ul>
help me... please
A moron-level question here: how do I include one HTML5 file (like a navigation bar or sidebar) inside another one? I would prefer not to have to copy/paste all of the same stuff over and over across a website.
I've done a lot of searching through this site so far, and all of the answers I've found so far seem to strip all of the formatting and css from the "included version". If it helps, I'm using GitHub Pages and an HTML5 template to make a personal website, which sorta leaves out server-side stuff like server-side includes or PHP (I hear those don't work there).
What I've got right now:
<!--some html-->
<header id="header">
Some text
<ul class="icons">
<li>Some more stuff that I want to include </li>
</ul>
</header>
<!--more html-->
And then this solution results in the HTML getting included, but all of my styling getting stripped. I also tried <embed> and got the same result.
Main file:
<!--some html-->
<object name="foo" type="text/html" data="header.html"></object>
<!--more html-->
Header file to include (header.html):
<header id="header">
Some text
<ul class="icons">
<li>Some more stuff that I want to include </li>
</ul>
</header>
http://www.hongkiat.com/blog/html-import/
The above link discuss about your issue. Import is used to use to include html file to other html file. Hope this solves your problem.
Github pages brings all the features you want.
And no : you're not a moron to ask such a question.
You can start your journey : here
Then go Jekyll.
I am using Jade just to include other sections in my HTML files using include. This works fine if I write Jade syntax instead of HTML syntax. But in my case, I need to write HTML syntax only. I am trying to use jade just for include only.
From this link, I found that we can write HTML by including . or | in the code. So, to test this out, I wrote the code like this:
File index.jade
div.main.
<div class="wrapper">
include header
</div>
As you can see in above code, I added . as suffix to the Jade syntax line, i.e., div.main., which lets me write HTML from next line.
File header.jade
<header></header>
But this isn't working. The rendered HTML looks like this:
File index.html
<div class="main">
<div class="wrapper">
include header
</div>
</div>
If I don't use . and follow the Jade syntax, everything works fine. But in my case, I really need to write in HTML, but not in Jade.
Is there a workaround to make the include work inside the HTML syntax?
Well, it is possible to do what you want, but I am not sure if Jade is the best option.
Note: In Jade, every line which starts with < is considered plain text, so there is no need to use dot or | to write html tags.
Here is a working example of what you want:
a.jade
div.main
<div class="wrapper">
include b.jade
</div>
b.jade
<div class="b">I am content from b.jade</div>
and after compilation of a.jade we get:
a.html
<div class="main">
<div class="wrapper">
<div class="b">I am content from b.jade</div>
</div>
</div>
This code was tested and it works 100% with the latest version of Jade, but It works only when you don't increase indentation level. For example, the following code will not work:
div.main
<div class="wrapper">
include b.jade
</div>
On compilation it will throw: unexpected token "indent", and the error itself:
div.main
<div class="wrapper">
include b.jade
^^ extra indent "tab"
</div>
The same is true for nested plain HTML too, so the following:
div.main
<div class="wrapper">
<div class="foo">
include b.jade
</div>
</div>
will also throw this error: unexpected token "indent", and the errors:
div.main
<div class="wrapper">
<div class="foo">
^^
include b.jade
^^^^
</div>
^^
</div>
You can write code like this:
div.main
| <div class="wrapper">
| <div class="foo">
| <div class="bar">
include b.jade
| </div>
| </div>
| </div>
and assuming that we already have that b.jade, it will be compiled into:
<div class="main">
<div class="wrapper">
<div class="foo">
<div class="bar"><div class="b">I am content from b.jade</div></div>
</div>
</div>
</div>
But note where I placed that include b.jade, exactly one tab has been added in comparison with last Jade command div.main (so included file will be nested into .main div), and you should follow that indent rule if you want your code to work.
Alternative solution
As I wrote at the beginning, Jade is not the best option in your case. I would use another server side language to do what you want.
Here is a basic algorithm:
Write your HTML files in plain HTML (.html) and as an include use a custom tag like <include b.html>
Create a master file using a server side language which will load and process your HTML files and will replace your custom tags with actual content from these files
Save output to a new file and use it.
Here is an example written in PHP:
master.php
<?php
$main_file = "a.html";
$content = file_get_contents($main_file);
$content = preg_replace_callback(
'!<include\s+([^>]+)>!',
function ($m) {
return file_get_contents($m[1]);
}, $content
);
file_put_contents("bundle.{$main_file}", $content);
Now HTML files:
a.html
<div class="main">
<div class="wrapper">
<include b.html>
</div>
</div>
b.html
<div class="b">foobar</div>
Now after we will execute master.php we will get bundle.a.html with the following content:
bundle.a.html
<div class="main">
<div class="wrapper">
<div class="b">foobar</div>
</div>
</div>
I get stuck by the same problem. Jade requires me to use no indent in the plain HTML. But if you change the header.jade to header.html, it will work.
Sorry as this may be a very open ended question... I am wondering if it is at all possible to display different text when a link is clicked. For example on my personal website if I was to have an "About" or "Contact" link could I switch the text of the body without reloading the page.
In the body of my index.html file I have:
<div class="nav-bar">
<ul class="nav">
<li id="other"><a>About</a></li>
<li id="other"><a>Contact</a></li>
<li id="other"><a>Other</a></li>
</ul>
</div>
And in was wondering if I could using a:active or a:target in a separate CSS style sheet to perform the task as described above or if I need to use JS.
The idea of switching the text of the body without reloading the page is what is commonly known as “single page application”, a rather trendy thing with many benefits and some disadvantages or challenges. It is normally implemented using JavaScript, often using a library or framework, since that’s how we handle programming on web pages.
However, it is possible to achieve the very basic functionality of a single-page application using HTML and CSS only. This functionality means that the page has the content of an entire site and only a selected part of it is visible. You would use :target, which refers to the element that was the target of the most recent link that was followed. (The :active pseudo-class is something very different: it refers to a link or equivalent when it has been activated, typically by clicking on it, and before it has actually been followed – normally, a short time.)
Minimal example:
<!doctype html>
<meta charset=utf-8>
<style>
.section { display: none }
.section:target { display: block }
</style>
<div class="nav-bar">
<ul class="nav">
<li><a href=#About>About</a></li>
<li><a href=#Contact>Contact</a></li>
<li><a href=#Other>Other</a></li>
</ul>
</div>
<div id=About class=section>
About us
</div>
<div id=Contact class=section>
Contact us
</div>
<div id=Other class=section>
Other stuff
</div>
This does not work e.g. on IE 8 and older (which do not support :target), which is one of the reasons why this is a rather theoretical approach.
You are going to need to use Javascript to change things dynamically without page refresh ... This is crude, but will show you how to do what you are expecting ...
NOTE: You must include the <script src="http://code.jquery.com/jquery-1.9.1.js"></script> since I have used a bit of jQuery (A JavaScript library)
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<div class="nav-bar">
<ul class="nav">
<li id="other1" onClick="changeText('other1');"><a>About</a></li>
<li id="other2" onClick="changeText('other2');"><a>Contact</a></li>
<li id="other3" onClick="changeText('other3');"><a>Other</a></li>
</ul>
</div>
<div id="page_content">
PAGE CONTENT!!
</div>
<script>
function changeText(text){
if (text === 'other1'){
$('#page_content').html('About Us!!');
}
if (text === 'other2'){
$('#page_content').html('Contact Us!!');
}
if (text === 'other3'){
$('#page_content').html('Other!!');
}
}
</script>
</body>
</html>
I'm searching for a program or website that does convert html-code and css-code into a single html-sequence.
|| CSS
div { color: #eaf; }
|| HTML
<div>Foo</div>
<p>Bar <div>& Spam!</div></p>
Should be converted to
<div style="color:#eaf;">Foo</div>
<p>Bar <div style="color:#eaf;">& Spam!</div></p>
Why I search for it?
Because most email-clients do not support <style></style> in the email's body.
Thanks!
Proper syntax would be...
<div style="color:#eaf;">Foo</div>
<p>Bar <span style="color:#eaf;">& Spam!</span></p>
Here's a link to an online tool.
Here's another link to an online tool.
I've used both of these in the past with good results.
I found this: http://www.pelagodesign.com/sidecar/emogrifier/
Is that what you're looking for?