Approaches to implement macro definitions in html

Question

I would be great doing things like

<define tag="myTag" options="3">
<h1> #1 </h1>

<ul>
  <li> #2
  <li> #3
</ul>

</define>

and then use it:

<myTag option="foo" option="bar" option="bean" />

I regard macros as really big advantage.

A work-around is using a macro processor like m4, or using php to simulate the macros efect. Any other technique to consider?

If you can simulate it using PHP, then you should be able to do this using Javascript :) — Karolis, Oct 02 '11 at 11:29
HTML isn't a programming language, it's a document markup language. It's only intended to impart meaning onto a document. "This bit of text is a paragraph, that bit of text is a heading level 1, that other bit of text is an item in a list". — GordonM, Oct 02 '11 at 11:30
jQuery has some beta templates functionality: http://api.jquery.com/category/plugins/templates/ Looks really nice. — Karolis, Oct 02 '11 at 11:38
Should be possible to do it by letting the browser process some [XSLT](http://en.wikipedia.org/wiki/XSLT). — hakre, Oct 02 '11 at 11:55
@Karolis, yes but I don't want replacements be performed at the browser side. Better to send the final html to render. — cibercitizen1, Oct 02 '11 at 23:07
@GordonM, yes but macros are very useful and powerful (see LaTeX). This is an opinion, but macros in html, if correctly used, would do html files more clear and easier to write them directly (withou help of programs like dreamweaver, aptana, kompozer) as .tex files are written. — cibercitizen1, Oct 02 '11 at 23:13
@cibercitizen1 I don't understand. You wanted HTML to have macros. But if browsers had macros then replacements would be performed at the browser side too, because HTML is a browser side programming language. — Karolis, Oct 03 '11 at 08:17
@Karolis. Opps, yes you are absolutely right. (By the way, thanks for editing the question). I'll take a look about how to do it in javascript. — cibercitizen1, Oct 03 '11 at 09:04
@cibercitizen1 If you want server side solution that works with PHP, then I think **Smarty** would be the best solution for you. — Karolis, Oct 03 '11 at 09:21

score 3 · Accepted Answer · answered Oct 02 '11 at 22:05

Perhaps obvious, but the C preprocessor can do the job.

index._html

#define _em(a) <em> a </em>

#define _image(a, b) <img src="a" b/>

#define _list(a, b, c) <h1> a </h1> \
<ul> \
    <li> b </li> \
    <li> c </li> \
</ul>
<!-- ___________________________________________________ -->

<!doctype html>

<html> 


#define _theTile The Bar Title
#include "head._html"


<body>

_list(foo, bar, bean)

This is really _em(great)

_image(media/cat.jpg, )

_image(media/dog.jpg, width="25%" height="10px")

</body>

</html>

Being head._html

<head>

    <meta charset="utf-8"/>
    <title> _theTile </title>

    <!-- more stuff ... -->

</head>

Then,

cpp -P index._html > index.html

produces:

<!doctype html>

<html> 

<head>

    <meta charset="utf-8"/>
    <title> The Bar Title </title>

    <!-- more stuff ... -->

</head>

<body>

<h1> foo </h1> <ul>     <li>  bar </li>     <li>  bean </li> </ul>

This is really <em> great </em>

<img src="media/cat.jpg"  />

<img src="media/dog.jpg"  width="25%" height="10px"/>

</body>

</html>

score 1 · Answer 2 · answered Oct 02 '11 at 12:47

1

If you want to do it in the text-editor level, consider using Zen Coding.

answered Oct 02 '11 at 12:47

Itaypk

1,103
10
25

cibercitizen1 · Answer 3 · 2011-10-03T16:02:16.703

In javascript

<!doctype html>

<html> 

<script>
    function em(a) {
        var text = " <em> $a </em>".replace("$a", a);
        document.write(text);
    }

    function image(a, b) {
        var text = '<img src="$a" $b  />'.replace("$a", a).replace("$b", b);
        document.write( text );
    }

    function list(a, b, c) {
        var text = '<h1> $a </h1> \
            <ul> \
            <li> $b </li> \
            <li> $c </li> \
            </ul>'
            .replace("$a", a).replace("$b", b).replace("$c", c);

          document.write (text);
    }
</script>

<body>

<p>
<script> list("foo", "bar", "bean") </script>

<p> This is really <script> em("great") </script>

<p>
<script> image ("prosper.jpg", 'width="35%"') </script>

</body>

</html>

Pros: no prepocessing needed.

Cons: A bit annoying (always write <script> </script>). No direct way to include external html (afaik).

score 0 · Answer 4 · answered Aug 16 '15 at 04:24

0

I've written a single-class, zero-installation macro system aimed straight at HTML coding. You'll find it here:

aa_macro.py

answered Aug 16 '15 at 04:24

fyngyrz

2,458
2
36
43

cibercitizen1 · Answer 5 · 2011-10-03T10:53:43.847

Now with php:

<!-- index.php -->
<?php

function list_($a, $b, $c) {
    echo "
        <h1> $a </h1>
        <ul>
            <li> $b </li>
            <li> $c </li>
        </ul>
    ";
}

function em($a) {
    echo "<em> $a </em>";
}

function image($a, $b) {
    echo "<img src=\"$a\" $b/>";
}


?>



<!doctype html>

<html> 


<?php 
  $theTitle='The Bar Title';
    include 'head.php';
?>


<body>

<? list_(foo, bar, bean) ?>

This is really <? em(great) ?>

<? image('media/cat.jpg', '' ) ?>

<? image('media/dog.jpg', 'width="25%" height="10px"') ?>

</body>

</html>


<head>

    <meta charset="utf-8"/>
    <title> <? echo "$theTitle"; ?> </title>

    <!-- more stuff ... -->

</head>

Then

 $    php index.php  > index.html

gives

<!doctype html>

<html> 



<head>

    <meta charset="utf-8"/>
    <title> The Bar Title </title>

    <!-- more stuff ... -->

</head>


<body>


        <h1> foo </h1>
        <ul>
            <li> bar </li>
            <li> bean </li>
        </ul>

This is really <em> great </em>
<img src="media/cat.jpg" />
<img src="media/dog.jpg" width="25%" height="10px"/>
</body>

</html>

Approaches to implement macro definitions in html

5 Answers5