The article is a demonstration content of Hs Highlighter output.

 

HTML / XML

<?xml version="1.0" encoding="utf-8"?>
<extension version="1.7" type="plugin" group="system" method="upgrade">
	<name>plg_system_hs_message</name>
	<author>Hayato Sugimoto</author>
	<creationDate>April 2012</creationDate>
	<copyright>Copyright (C) 2012 Hayato Sugimoto. All rights reserved.</copyright>
	<license>GNU General Public License version 2 or later; see LICENSE.txt</license>
	<authorEmail>mail</authorEmail>
	<authorUrl>hs-shelf.com</authorUrl>
	<version>1.0.2</version>
	<description>PLG_HS_MESSAGE_XML_DESCRIPTION</description>
	<scriptfile>script.php</scriptfile>
	<files>
		<filename plugin="hs_message">hs_message.php</filename>
		<filename>index.html</filename>
		<folder>style</folder>
	</files>
	<languages folder="language">
		<language tag="en-GB">en-GB/en-GB.plg_system_hs_message.ini</language>
		<language tag="en-GB">en-GB/en-GB.plg_system_hs_message.sys.ini</language>
		<language tag="ja-JP">ja-JP/ja-JP.plg_system_hs_message.ini</language>
		<language tag="ja-JP">ja-JP/ja-JP.plg_system_hs_message.sys.ini</language>    
	</languages>
	
    <config>
		<fields name="params">
			<fieldset name="basic">
				<field name="style" type="list"
					default=""
					description=""
					label="STYLE">
					<option value="popup">POP-UP</option>
					
					<option value="topbar">TOP-BAR</option>
				
				</field>
			</fieldset>
		</fields>
	</config>	
	
	
</extension>

 

JavaScript

var HSJS = HSJS||{};
HSJS.plugins = HSJS.plugins||{};

HSJS.plugins.systemMessage = new Class({
	Implements:[Options,Events],
	options:{
		duration:300,
		language:{
			close:'Close'
		}
	},
	initialize:function(opts){
		this.setOptions(opts);
		this.els = {
			system:$('system-message')
		};
		
		this.systemMessage();
		
	},

	systemMessage:function(){
		var el = $('system-message');
		
		
		
		if(el===null||el.getChildren().length==0){return;}

		el.addClass('hs_message');
		
		//move the screen position to top
		new Fx.Scroll(window).toTop();	
			
		el.set('morph',{
			'duration':this.options.duration
		});
		
		var w = window.getSize();
		this.els.bg = new Element('div.hs_fbg',{
			styles:{
				'width':w.x,
				'height':w.y,
				'opacity':0.6
			},
			morph:{
				duration:this.options.duration
			},
			events:{
				'click':function(){			
					
				}.bind(this)
			}
		}).inject(document.body);
		
		//change message position
		el.setStyles({
			'left':(w.x - 780)/2			
		}).inject(document.body);
		this.addCloseButton();
	},

	addCloseButton:function(){
		this.els.btnClose = new Element('div.hsp_btn_close',{
			
			events:{
				'click':function(){
					this.els.system.morph({
						'opacity':0
					});
					(function(){
						this.els.bg.morph({
							'opacity':0
						});
					}).delay(this.options.duration,this);
					(function(){
						this.els.system.dispose();
						this.els.bg.dispose();
					}).delay(this.options.duration*2,this);							
				}.bind(this)
			}
		}).inject(this.els.system);
		
		
		new Element('span.hsp_btn_close_txt',{
			text:this.options.language.close
		}).inject(this.els.btnClose);
		
		
		new Element('div.clear').inject(this.els.system);
	}	
});

* You can highlight some lines like above code.

CSS

/*
 * System Message
 */
div.hs_message a.close{
	display:none;
}
/* reset default CSS */
#system-message.hs_message ul,
#system-message.hs_message ul li,
#system-message.hs_message,
#system-message.hs_message dt,
#system-message.hs_message dd,
#system-message.hs_message dd ul,
#system-message.hs_message > .error > ul, 
#system-message.hs_message > .warning > ul, 
#system-message.hs_message > .notice > ul,
#system-message.hs_message > .message > ul
{
	background:none;
	padding:0;
	margin:0;
	color:#666;
	border:none;
	text-indent:0;
}
/* Key styles */
/*
 * This is a fake background ! 
 * Please DO NOT change the values of top, left, position, z-index,
 * but you can change background style or others!
 */
div.hs_fbg{
	top:0;
	left:0;
	position:fixed;
	z-index:1101;
	background-color:#000;
}	
/*
 * Message Container !
 * Don't change! 
 */
#system-message.hs_message{
	position:absolute;
	z-index:1102;
}

 

More languages such as php, java and others are ready to use! To see available languages list, please see Hs Users page and download it!