Updates from May, 2012 Toggle Comment Threads | Keyboard Shortcuts

  • Pablo 11:03 PM on 30 May 2012 Permalink | Reply  



    I’m learning some CodeMirror. This is not the first time i try to learn CodeMirror, i had some unsuccessful attempts in the past, but after a lot of trial and errors trying to create my own highlight text editor in javascript, finally i adquire the knowledge to understand it a little bit better to the point were i was able to learn from it.

    So, the first thing i didn’t understood about this (because all the code parsing was a new concept for me) was how the mecanism worked.  I was too n00b to understand the documentation, so now, here i will explain what i understood in simple terms in case someone else out there is trying to learn it but requires an easy introduction. This is for people wanting to create their own, custom syntax highlighters. If you want to use it for existing languages, read the “how to use” documentation from codemirror, they have really good examples.



    This is what you use to define a mode. A mode is basically a syntaxt highligher (example: you have javascript modes, C++ mode, PHP mode, etc…) The mode object is the rsponsable of parsing the text and applying CSS styles to TOKENs (which will colorize the text)

    1) The process is simple. CodeMirror will send a stream object to your parser, starting from char 0 and will go line by line to the end of the textarea.

    2) The stream object represents a token, from it’s start ( the begining of a line or the end of another token ) to the end of the line. If you dont do anything, this token will represent one line of text in the textarea.

    3) Your mode’s token method has to return a string, a CSS class name that will be applyed to the current token.  You set this class in the styles to format your custom highlighter.

    3) The “cursor” or the position at which CodeMirror reads the text must be advanced, you are responsable of this.  You can move char by char, or by many chars at a time. Always inside a single line of text.

    4) The stream object has many methods to move the position of the position of the “cursor”. When you move, what you are actually doing is changing the “length” of the current token. THe token starts at the begining of a line or at the end of a previous token. So if you move 3 chars ahead, the token will be 3 chars long.

    5) Basic example. This highlighter will only highlight the word “hello” of a textarea:

    CodeMirror.defineMode("hello", function() {
      return {
        token: function(stream,state) {
          //stream match moves the cursor forward, so the text token will start at the END of "hello"
          //So if the line of text said: "hello world" one token will be [hello] and the other [ world]
          //NOTICE: ^ matches the start of the token, not the start of the line!
          if ( stream.match(/^hello/) ) {
            return "red-text";

    6) Then you have a 2nd object, called “state object” this is just a plain javascript object that YOU setup to keep a state based on the parsing of the tokens. This object is set at the start of a parsing session and passed to your token method each time a token is analyzed. How you handle this object is up to you and it’s not the responsability of CodeMirror’s parser.

    The common usage of the state object obviously will be to implement a State pattern to colorize tokens in a certain context.

    I hope someone find this article helpful.

    • bin 10:55 AM on 29 October 2013 Permalink | Reply

      Thank you for your post
      I have one question: how does CodeMirror understand “red-text” ? That’s a class of CSS

      • Pablo 3:29 PM on 4 November 2013 Permalink | Reply

        Code mirrors scans blindly the texts, letter by letter, and then depending on the parser reading each letter it will create states and stuff like that to save contexts on which they keywords are apearing.

        To understand a little better you should create a simple plugin to for example, add color to a single word of choise. (that’s what i did to understand how it works myself)

  • Pablo 4:51 PM on 21 May 2012 Permalink | Reply  

    PHP array_key_exists key insensitive 

    Posted by someone nicknamed “imaginary” @ http://php.net/manual/en/function.array-key-exists.php

    array_key_exists(strtolower($key), array_change_key_case($search));
  • Pablo 11:18 AM on 20 May 2012 Permalink | Reply  

    Bootstrap Modal Auto Align 

    When using bootstrap's modal plugin, sometimes you might have aligments issues, to fix them:
                        width: 'auto',
                        'margin-top': function () {
                            return -($(this).height() / 2);
                        'margin-left': function () {
                            return -($(this).width() / 2);
  • Pablo 8:19 PM on 19 May 2012 Permalink | Reply  

    Compare jQuery DOM objects for equality 

    get(0) gives you a reference to the raw DOM element. Just adding this to help someone else in case this post gets googled it by someone.

    var A = $('#divA');
    var B = $('#divA');
    if( A.get(0)===B.get(0) ){
        alert('A === B');
    • Vicken 5:40 AM on 10 August 2012 Permalink | Reply

      Hy Pablo,
      First of all thank you for ur tutorials,
      the subject that i want to talk u about, its not about the “jquery”
      its about “Control DAE animation in Papervision3d ”
      i did like u said in ur tutorial but everytime i export my model”animated”, it doesnt show the animation it only shows the model,but when i try it with ur model it shows the animation..
      what am i doing wrong?
      i use 3ds max 2012 and open colada,
      cz the autodeskcolada shows nothing.
      please help reply
      thank you

  • Pablo 7:52 PM on 14 May 2012 Permalink | Reply  


    A little class i made to handle the dispatch of events and signals. Very easy but flexible.




  • Pablo 1:35 PM on 12 May 2012 Permalink | Reply  

    CSS Transitions 

    This one i never used it up until today… i thought it was some crazy hacky thing, but it’s actually really cool.
    Basically, you add this attribute to the element that you want to animate, it takes 2 parameters (that i know of):

    1. The CSS property’s name that you want to animate of the current selector.
    2. THe time that the animation will take to execute.

    The code below will animate an anchor tag from a RED background to a GREEN background when you hover the mouse over it:
    On hover, the background will change to green, which will trigger the transition.

    a {
    		transition:background 1s;
    		-moz-transition:background 1s; /* Firefox 4 */
    		-webkit-transition:background 1s; /* Safari and Chrome */
    		-o-transition:background 1s; /* Opera */
    a:hover { background:green; }

    Live example here: http://www.w3schools.com/css3/tryit.asp?filename=trycss3_transition1

  • Pablo 10:15 PM on 8 May 2012 Permalink | Reply  

    one of those things… 

    I’m working on my website and i got a very weird error… for some reason all the javascripts on my page were being re-loaded when i attempted to load some module via ajax… it was very weird…

    then, after some code sniffing, i found the error… i forgot to close a DIV tag, so i was appending that DIV to the BODY and because it was open, it was eating all the page, so i was actually adding all the body to itself again, meaning, all the SCRIPTS tags were adding itself again, hence the reload (im using jquery)

    Anyway… back to coding…

Compose new post
Next post/Next comment
Previous post/Previous comment
Show/Hide comments
Go to top
Go to login
Show/Hide help
shift + esc