Approaches to implement macro definitions in html

StackOverflow https://stackoverflow.com/questions/7626042

  •  06-02-2021
  •  | 
  •  

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?

Was it helpful?

Solution

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>

OTHER TIPS

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

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

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>

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

aa_macro.py

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top