Tools

Syntax Highlighter HTML5 Web Component Based on Lea Verou’s Prism.JS

AcidJs.XHilite is a syntax highlighter HTML5 Web Component, based on Lea Verou‘s Prism.JS and wrapped as a custom tag with support for multiple languages and both declarative and async loading of the code to be highlighted.

Usage:

<acidjs-xhilite language="javascript" height="200" width="400">
function sayHi() {
    return "Hello, World"!;
}

sayHi.call(this);
</acidjs-xhilite>

Recently I my HTML5, CSS3 and JavaScript Experiments website received a major facelift and as a next step and I am planning to replace the syntax highlighter I am currently using with AcidJs.XHilite.

HTML Attributes of the Tag

Any native HTML attribute (id, class, data-*, style, etc.) is supported, plus the component-specific:

  • language – The language to highlight, for example language="javascript". Default: "markup" (usable with HTML, SVG, XML, etc.). Check prismjs.com for a complete list of supported languages.
  • width – Optional width in pixels of the code block, for example: width="600".
  • height – Optional height in pixels of the code block, for example: height="200".
  • src – Instead of adding the code to highlight in the tag, you can specify path to the file which content needs to be highlighted, for example: src="example.js"

JavaScript Methods of the Tag

Native JavaScript methods (document.getElementById, document.querySelector, etc. as well as their jQuery or other libraries aliases).

Check the screenshots below or go straight to the demo and download:

x-hilite-markup

x-hilite-javascript

x-hilite-svg

x-hilite-css

x-hilite-php

x-hilite-svg

x-hilite-java

x-hilite-csharp

Check the demo on this page. You will also find a download link there. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.

REST API for IMDB Movie Data

IMDB Fetcher is an experimental, free and easy to use REST API for getting movie, series and artist data from IMDB and returning it as serialized JSON objects ready to use on web applications or websites.

imdb-fetcher

REST API Methods:

  • get/title: The method retrieves data (release date, running time, embeddable poster, writers, directors, cast, synopsis, country) for the requested title.
  • get/search: Search IMDB for titles, actors, companies, writers, directors, etc.
  • get/name: The method returns info about the person, who has been searched for – name, date of birth, short bio, productions, photo, etc.
  • img/: Images on IMDB cannot be hot-linked. This method circumvents the limitation.

Go straight to the documentation and start using today!

Related Posts and Links

Table painter widget for WYSIWYG editors and web applications

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I’m happy to announce the latest component, which is now part of Acid.JS Web.UI. AcidJs.TablePainter is a fast, responsive, fully configurable and reliable table painter widget for WYSIWYG editor or any other web applications.
table-painter
Key Features
  • Rich client API and custom events.
  • Small footprint.
  • Imageless CSS3 skins, gracefully degrading for older browsers.
  • Crossbrowser – all major browsers are supported.
Related Links

Saying That Your Website is Under Construction in a Stylish HTML5, CSS3 and JavaScript Fashion

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

My new AcidJs.ComingSoon component is my proposal to say that your website is “under construction” in a tasteful fashion. It is stylish and lightweight, fully HTML5/JavaScript/CSS3/AJAX driven, fully customizable, imageless and fun to use.

coming-soon

Key features

  • Lightweight and operating entirely on the client.
  • Built with the latest technologies, as your future website will be.
  • Fully customizable.
  • Stylish and flexible.
  • Easy to modify and fun to use.
  • Your way to say in stylish manner that your website is “under construction”.

Click here to view the demo and you will love it so much, that you will download and give it a try immediately.

Enjoy the weekend!

Related Posts

HTML5 Resume Generator and Onepager Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

HTML5.CV is a resume generator and one pager website, with cool modern looks, various customization options and flexible resume data file. You can add any fields (contact details, employment history, education, interests, etc) and define photo.

The UI is extremely easy to customize, so if you are acquainted with CSS, just give it a try.

html-5-cv

Key Features

  • Lightweight, modern and loading extremely fast.
  • CSS3 driven with fallback for older browsers.
  • Cross-platform JSON data format for the resume.
  • Support for multiple resume data files.
  • Operating fully on the client.
  • Sleek imageless UI, which can be easily modified.

Related Posts

Development and Productivity Extensions for Google Chrome

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

If you are looking for cool development and productivity tools, here are a few, created by me, and available as handy Chrome Chrome extensions:

Builder.CSS

Builder.CSS is a free tool for merging and minifying style sheets into a single file, using some of the coolest HTML5 features like drag and drop of local files and processing them without uploading to the server. I am happy to announce that recently Builder.CSS has evolved to a free online service with tons of improvements, brand-new and amazing interface, drag and drop of local of styleshets from the desktop, predefined projects and much more. Get the Chrome extension or click here for more info and demo.

builder-css

W3C Validation Bookmarklet

Acid.JS Validator is a free bookmarklet that uses the W3C SGML parser’s API to validate the markup of the page on which it is called. Get the Chrome extension or click here for more info and demo.

validator-valid

Stickeez

Stickeez is a sticky notes JavaScript application using the new HTML5 File API, localStorage and CSS3. The data is fully persisted on the client. Stickeez also has an option for importing/exporting data so users can save their notes before cleaning up cookies or import notes to another browser. And finally – users can choose between 4 types of board styles – cork, fridge, whiteboard and skulls. Get the Chrome extension or click here for more info and demo.

stickeez

Image to Base-64 Data-URI Encoder

Image2Base64 is an online tool, provided by Acid.JS Web.UI for conversion of image files to base64 data URIs. It implements the new HTML5 file API, and the selected images are processed entirely on the client without uploading them onto the server. Get the Chrome extension or click here for more info and demo.

image-to-base-64

Hasher Message Digest Encoder

Hasher is an online service for creating message digests with a wide range of more than 40 encryption algorithms. Depending on the choice of the user, after the encryption hashes are stored in the browser’s local storage in convenient JSON format so they can be used or deleted later. Get the Chrome extension or click here for more info and demo.

hasher

HTML5, CSS3 and JavaScript Experiments and Insight Website

Try Semtex – the new HTML5, CSS3 and JavaScript UI framework!

I am pleased to announce that I’ve just finished my latest endeavour – HTML5, CSS3 and JavaScript Experiments and Insight, and most of the code samples and demos from my blog have been moved there in and new and convenient code-listing and demo form. From now on, each new blog post will be accompanied by a dedicated page on that website on which my readers will be able to have a look at the code, run the example and eventually download it.

Enjoy HTML5, CSS3 and JavaScript Experiments and Insight and have a great rest of the week!