There are many note systems out there: Evernote, OneNote, and SimpleNote for example. Wouldn’t it be nice to have your own custom notes system that you are in control of. For some, the simplicity of the Cloud note systems make them unbeatable in usability. What if you want something a little more geeky?
If your like me, you don’t like to just take the easiest approach to a problem. Solving the problem can be more rewarding than the solution itself. In this case, I wanted a note system that was separate from the cloud, I could customize in every way, and portable. I found out how to do this with client side web technologies.
Now, if you are the type of person who uses evernote all the time,
then this solution is not likely to replace it. Either way it is a fun way of taking notes and perhaps the ones you don’t want synced can stay on this local note system.
Now, let’s get on to the fun part!
To start, I decided that having the notes in HTML would allow me to have flexibility in display and would not be to difficult to type in. Here is the structure I used for my note system:
This structure allows flexibility while maintaining a somewhat simple design.
To add an indicator of the notebook the user is in I put the following above:
With the link referring to a file containing a list of the notebooks available. I put the file one folder up containing the following contents:
Now, this note system would be pretty ugly if we were to stop here without
styling it. I created a style-sheet in the
Assets folder in the same
directory as the notebook list. I loosely based the style on
and used the color pallets provided.
This is what I put in the style-sheet:
You should end up with something looking like this:
Pretty cool, right?
Now, the last step is to style the notebook list. I put the following in the header:
And that concludes the basic notes system.
List of Notes
To make a list of the notes in a notebook, I put the following under the notebook title:
Then, I created a rudimentary js script to insert the notes into the list using JQuery:
Finally, I styled the list by adding the following into the main style-sheet:
To get code highlighting in my notes, I used Highlight.js.
I downloaded it and placed it in the main
Assets folder. Then, I added the following to all of the notebooks:
When I want to highlight some code, I simply use
<pre><code>Place code here...</code></pre>.
Highlight.js takes care of the rest!
This was probably the hardest thing to find out how to do. I wanted something that would convert math expressions client side while relying only on the browser. Obviously, you always have the choice to use MathML, but that is cumbersome and love to use LaTeX math. I ended up finding a project by Mozilla called TeXZilla, which converts LaTeX math to MathML. Unfortunately, this won’t work on every browser.
To use TeXZilla, you must download it and include the script by using:
Then, to make it auto convert, you must use the x-tex Custom Element. This is included using the following:
Then you can put something like the following:
And it will convert it to MathML.
Note: In Firefox, you will need to enable the
There are many more things you can do with this note system and I have only scratched the surface. Hopefully I have inspired you to take this further and discover more ways to improve upon this concept.