My Tech Notes: html

Showing posts with label html. Show all posts

Enable code syntax highlighting in blogger site using highlightjs

Template -> Edit HTML

Insert the following inside <head> tag:

    
    <!-- BEGIN: Syntax Highlighting with highlight.js -->
    <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/agate.min.css' integrity='sha512-wI7oXtzNHj/bqfLA3P6x3XYbcwzsnIKaPLfjjX8ZAXhc65+kSI6sh8gLOOByOKImokAjHUQR0xAJQ/xZTzwuOA==' referrerpolicy='no-referrer' rel='stylesheet'/>
    <script crossorigin='anonymous' integrity='sha512-bgHRAiTjGrzHzLyKOnpFvaEpGzJet3z4tZnXGjpsCcqOnAH6VGUx9frc5bcIhKTVLEiCO6vEhNAgx5jtLUYrfA==' referrerpolicy='no-referrer' src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js'/>
    <script>hljs.highlightAll();</script>
    <!-- END: Syntax Highlighting with highlight.js -->
    <!-- BEGIN: CSS for code in pre and code -->
    <style type='text/css'>
        pre {
            font-family: monospace;
            font-size: 1 em;
            background: #333;
            color: #33cc33;
            tab-size: 4;
            padding: 5px;
            border: 1px dotted grey;
            border-radius: 5px;
            line-height: 2.0;
            overflow-x: auto;
            white-space: pre-wrap;
        }

        code {
            white-space: pre-wrap;
            overflow-x: scroll;    
            font-family: monospace;
            font-size: 1em;
        }
    </style>
    <!-- END: CSS for code in pre and code -->

Click save icon to save the template

Use it in your blog post:

<pre><code class="language-html">...</code></pre>

HTML table fill up the whole page

<table style="width:100%; height:100%; position:absolute; top:0; bottom:0; left 0; right:0;" border="0" cellspacing="1" cellpadding="3">
    <tr id="content" style="height: 100%;">
        <td align="center">Content</td>
    </tr>
    <tr id="footer" style="height:28px;">
        <td align="center">footer</td>
    </tr>
</table>

CSS: image auto resize and centered inside a div

<div style="width:600px; height:400px;">
<div style="vertical-align:middle; text-align:center; width:100%; height:100%;">
    <img style="max-width:100%; max-height:100%; width:auto; height:100%;" src="http://your-domain.org/your-img.png"/>
</div>
</div>

CSS: fit textarea to its parent div

textarea {
    height: 100%;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

Example HTML code:

<div style="width:600px; height:400px;">
<textarea style="height:100%; width:100%; box-sizing: border-box;" readonly>
This is a textarea.
</textarea>
</div>

Run the Example:

This is a textarea.

HTML: read only checkbox

Method 1:

<input name="test" type="checkbox" disabled checked/>

Cons: disabled checkbox doesn't send value via POST data

Method 2:

<input name="test" type="checkbox" checked onclick="return false;"/>

Cons: does not work for double-clicks in IE.

Method 3:

<input name="test" type="checkbox" checked onclick="this.checked=!this.checked;"/>

Cons: does not work for double-clicks in IE.

reload web page every a few seconds

Method 1: html meta element

<head>
<meta http-equiv="refresh" content="10"/>
</head>

Method 2: Use javascript(setTimeout(), window.location.reload()):

<html>
<body onload="setTimeout(function () { window.location.reload(1); }, 10000);">
</body>
</html>

css styles for pre and code


<style type='text/css'>
    pre {
        background-color: #eeeeee; border: 1px dashed #999999; color: black; line-height: 12pt; overflow: auto; padding: 5px; white-space: pre-wrap; width: 100%;
    }
    code {
        padding:0px 5px 0px 5px; font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New, monospace; font-size: 9pt;  font-weight: bold;
    }
</style>

Special HTML codes for math symbols

Display	Friendly Code	Numerical Code	Hex Code	Description
−		−	−	Minus Sign
+	+	+	+	Plus Sign
±	±	±	±	Plus or Minus Sign
×	×	×	×	Multiplication Sign
÷	÷	÷	÷	Division Sign
%	%	%	%	Percent Sign
‰			‰	Per Mille Sign (per thousand)
=	=	=	=	Equal Sign
≠		≠	≠	Not Equal To Sign
≈		≈	≈	Approximately Equal Sign
≡		≡	≡	Identical To Sign
<	<	<	<	Less Than Sign
>	>	>	>	Greater Than Sign
≤		≤	≤	Less Than or Equal To Sign
≥		≥	≥	Greater Than or Equal To Sign
∞		∞	∞	Infinity Sign
⅛		⅛	⅛	One Eighth Fraction
¼	¼	¼	¼	One Quarter Fraction
⅜		⅜	⅜	Three Eighths Fraction
½	½	½	½	One Half Fraction
⅝		⅝	⅝	Five Eighths Fraction
¾	¾	¾	¾	Three Quarters Fraction
⅞		⅞	⅞	Seven Eighths Fraction
∫		∫	∫	Integral Sign
∂		∂	∂	Partial Differential Sign
∆		∆	∆	Increment Sign
∏		∏	∏	N-ary Product Sign
∑		∑	∑	N-ary Sum Sign
√		√	√	Square Root Sign
∟		∟	∟	Right Angle Sign
∩		∩	∩	Intersection Sign
∙		∙	∙	Bullet Operator
ƒ				Function Sign
⁄		⁄	⁄	Fraction Slash

Javascript: collapsable div

Source Code

<script type="text/javascript">
function update(){
    var button = document.getElementById("button1");
    var div = document.getElementById("div1");
    var action = button.value;
    if(action=="Show"){
        div.style.display='block';
        button.value = "Hide";
    } else if(action=="Hide"){
        div.style.display='none';
        button.value = "Show";
    }
}
</script>
<input id="button1" type="button" value="Show" onClick="update();"/><br/>
<div id="div1" style="background-color:#e0e0e0;display:none;">
Hi, there.<br/><br/><br/><br/><br/>
</div>

My Tech Notes

Search This Blog