scriptogr.am css/html/javascript customization

CLOSED
Bids
2
Avg Bid (USD)
$211
Project Budget (USD)
$30 - $250

Project Description:
I want to switch to using [1] for blogging. I like the idea of editing a single file per blog article on disk and publishing it via [1]. However, I wish to write technical blog articles about programming which contain diagram, source code snippets, and charts of performance results, BUT without including image file of the diagrams & charts; idea is to convert ascii data in the single blog file into diagrams & charts on-the-fly using javascript & existing javascript libraries WITHOUT having to attach or link to images of diagrams & charts, i.e. the single ascii file will be self-contained and have all the info for the formatting (markdown via [1]), diagrams (shaky via [3]), & charting (highcharts via [6]). Ideally the customization will just run on the standard scriptogr.am servers without having to have an own server; but will consider going down the own-server route, e.g. digital ocean $5/month server worst case. I also don't like the default themes available with [1]. Therefore I am looking for a skilled web developer for some customization of the css/html to allow for the following functionality:

(1a) Want to be able to highlight snippets of source code using [2].
(1b) Want to be able to have long lines without wrapping, i.e. horizontal scroll bar.
(1c) Want to be able to show n lines of snippet, i.e. vertical scroll bar.
(1d) Want to be able to toggle between n lines & all lines.

(2a) Want to be able to create diagrams using [3], [4].
(2b) Maybe [3] can be used unmodified by getting parent to inject into iframe(s)?
(2c) Want to be able to have multiple diagrams on one page.

(3) Want mechanism on scriptogr.am page to allow readers to subscribe via email. How?

(4) Want mechanism on scriptogr.am page to allow readers to comment? Using [5]?

(5) Want to be able to chart results using minimum inline info in blog source file. Using [6]?

(6a) Theme needs to be dynamic like [7].
(6b) Diagrams, source code snippets, & charts should also scale as page is resized.

[1] http://scriptogr.am/
[2] http://highlightjs.org/
[3] http://mrale.ph/blog/2012/11/25/shaky-diagramming.html
[4] https://moe-js.googlecode.com/git/talks/jsconfeu2012/tools/shaky/deploy/shaky.html
[5] http://disqus.com/
[6] http://www.highcharts.com/demo/
[7] http://www.codinghorror.com/blog/

Additional Project Description:
12/09/2013 at 9:05 PST
Example (you may suggest changes to the syntax) of scriptogr.am markdown file with customized elements (we can use this to demonstrate that work is complete):

example.md:
Title: Example scriptogr.am markdown file with customization examples for inline diagrams, graphs, & code snippets
Date: 2013-12-09 17:00

* markdown before before diagram 1

<script>insert_diagram("#diagram1", 640, 192, "75%", hereDoc(function() {/*!
+--------------------+
| unoptimized Code 1|
| |
??? &lt;--+---* getX call |
| |
??? &lt;--+---* getY call |
| |
+--------------------+
*/}));</script>

* markdown before before diagram 2; see https://moe-js.googlecode.com/git/talks/jsconfeu2012/tools/shaky/deploy/shaky.html

<script>insert_diagram("#diagram2", 800, 700, "75%", hereDoc(function() {/*!
+------------+ +------------+
| | | |
| CONTEXT |&lt;-+ | CONTEXT |&lt;-+
| | | | | |
+------------+ | +------------+ |
| |
+------------+ | +------------+ |
| getY | | | getY | |
| | | | | |
| *------+--+ | *------+--+
| | | | | |
+------------+ | +------------+ |
| |
+------------+ | +------------+ |
| getX | | | getX | |
| | | | | |
| *------+--+ | *------+--+
| | | | | |
+------------+ | +------------+ |
| |
+------------+ | +------------+ |
| getSum | | | getSum | |
| | | | | |
| *------+--+ | *------+--+
| * | | * |
+-----+------+ +-----+------+
| |
+----------+-------+
|
v
+--------------------+
| SharedFunctionInfo|
| * |
+----------+---------+
|
v
+--------------------+
| unoptimized Code |
| |
??? &lt;--+---* getX call |
| |
??? &lt;--+---* getY call |
| |
+--------------------+
*/}));</script>

* markdown after before graph; see http://www.highcharts.com/demo/column-parsed

<script>insert_graph("#graph", 640, 192, "75%", hereDoc(function() {/*!
Jane John
Apples 3 4
Pears 2 0
Plums 5 11
Bananas 1 1
Oranges 2 4
Units="Units"
*/}));</script>

* markdown after before source code snippet; see http://highlightjs.org/
* Shows example C++ snippet with long non-wrapping line, first 10 lines should be shown (rest via vertical scroll bar or click to toggle all lines)

<script>insert_snippet("#snippet", "C++", 10, hereDoc(function() {/*!
#include <iostream>

// Very long line which doesn't wrap: The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.

int main(int argc, char *argv[]) {

/* An annoying "Hello World" example */
for (auto i = 0; i < 0xFFFF; i++)
cout << "Hello, World!" << endl;

char c = '
';
unordered_map <string, vector<string> > m;
m["key"] = "\\"; // this is an error

return -2e3 + 12l;
}

Many other lines
...
Last line
*/}));</script>

* markdown after source code snippet


12/09/2013 at 9:08 PST
Attaching file of above example since freelancer.com webpage removed whitespace which is important for shaky diagram to work.

Skills required:
Blog Design, CSS, HTML5, Javascript
Additional Files: example.md
About the employer:
Verified
Public Clarification Board
Bids are hidden by the project creator. Log in as the employer to view bids or to bid on this project.
You will not be able to bid on this project if you are not qualified in one of the job categories. To see your qualifications click here.


$ 144
in 3 days
$ 277
in 5 days