Approaches to implement macro definitions in html

Asked 2/10, 2011 at 11:23 Answered 16/8, 2015 at 4:24

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?

Pyretotherapy answered 2/10, 2011 at 11:23 Comment(10)

If you can simulate it using PHP, then you should be able to do this using Javascript :) – Sackcloth 2/10, 2011 at 11:29

That's what JavaScript is for. – Prosopopoeia 2/10, 2011 at 11:30

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". – Barcus 2/10, 2011 at 11:30

jQuery has some beta templates functionality: api.jquery.com/category/plugins/templates Looks really nice. – Sackcloth 2/10, 2011 at 11:38

Should be possible to do it by letting the browser process some XSLT. – Beaufert 2/10, 2011 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. – Pyretotherapy 2/10, 2011 at 23:7

@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. – Pyretotherapy 2/10, 2011 at 23:13

@Pyretotherapy 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. – Sackcloth 3/10, 2011 at 8: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. – Pyretotherapy 3/10, 2011 at 9:4

@Pyretotherapy If you want server side solution that works with PHP, then I think Smarty would be the best solution for you. – Sackcloth 3/10, 2011 at 9:21

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>

Pyretotherapy answered 2/10, 2011 at 22:5 Comment(0)

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

Encasement answered 2/10, 2011 at 12:47 Comment(0)

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).

Pyretotherapy answered 3/10, 2011 at 10:50 Comment(0)

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>

Pyretotherapy answered 2/10, 2011 at 23:1 Comment(0)

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

aa_macro.py

Deerhound answered 16/8, 2015 at 4:24 Comment(0)

Recommended topics

Hot tags