I thought it would take me a day or two to implement, it took almost two weeks...

But here it is, the new comments systems for blogs, heavily inspired by the forum system I developed earlier this year.

Which means that:

• You can easily add images, either by drag and drop or through the 'Insert Image' button
• You can add MathML, TeX and ASCIImath equations and they will be rendered with Mathjax
• You can add code snippets and they will be highlighted with highlights.js
• You can edit your comment(s) at will
• You can delete your comment if you were drunk when you wrote it and are having regrets

The email notification system has also been improved to let you know quickly when someone posts a comment to your blog (if you are the author of the blog post) or reply to your comment (if you are the author of a comment).

Please go ahead and post a comment down bellow.  Maybe try to add a photo (do you have a photo of your pet?), maybe try Mathjax or a code snippet?  I'd appreciate if you could let me know if you run into difficulties or if you encounter any error.

Thank you!

Previous post by Stephane Boucher:
3 Good News
Next post by Stephane Boucher:
Launch of Youtube Channel: My First Videos - Embedded World 2017

[ - ]
Comment by October 7, 2016

You can easily add images, either with a simple drag and drop or using the image button in the editor menu.  I will use drag and drop from my desktop here:

You can also relatively easily add some equations:

$$E = mc^2$$

the code for this equation:

$$E = mc^2$$


or more complicated:

$$y(n) = (h \ast x)(n) = \sum\limits_k h(k) x(n-k)$$

the TeX code for this equation:

$$y(n) = (h \ast x)(n) = \sum\limits_k h(k) x(n-k)$$


As you notice, the TeX equations are surrounded by a two couples of dollar signs (delimiters):

$$..$$


If you want your equation to be showed inline like this: $E = mc^2$, you need to surround your TeX code with only one dollar sign on each side:

$E = mc^2$

If you want to add a code snippet and would like to take advantage of the highlighter, you simply need to format it as 'code' in the formatting menu at the top of the editor.

[ - ]
Comment by October 8, 2016

This costs $200 and that costs$500.

It would be helpful if you could enable MathJax but not by default. Dollar signs are more common for financial use.

Thank goodness for the editing, though. That's a *huge* help.

[ - ]
Comment by October 9, 2016

I agree that the ability to edit was way overdue.  Now that the comment system is home-brewed, changes/improvements will be much easier to implement.

I will soon change the delimiters for Mathjax inline equations from the two dollar signs to:

$...$


but first, I need to go through all blog posts and change every inline equation to work with the new setting.

[ - ]
Comment by October 11, 2016

Testing testing ... I wonder if I'll get a chance to preview this before it gets posted? :-) [Edit: nope]

$$E(x) = \sum\limits_x xP(x)$$

Note: Preview before posting would be a nice feature. It can be tricky to get it right the first time.

[ - ]
Comment by October 11, 2016

Hi Ted!  Thanks for taking the time to test the system.  There is no preview but you have usually plenty of time to edit a comment before anyone notice it.  I agree though that a preview would be cool - I'll keep this in mind.

[ - ]
Comment by October 11, 2016

Hi Stephane! Yes, that's probably true. Just noticed a nice feature. One can right click on an equation and then select Math Settings > Math Renderer > Plain Source to display the TeX code used.

[ - ]
Comment by October 11, 2016

Indeed, that's a nice trick to learn to write TeX faster, thanks for mentioning it.

[ - ]
Comment by October 17, 2016

Testing

[ - ]
Comment by October 10, 2016

Here's an image of an equation:

So the 'image drag-n-drop' feature seems to be working properly for me.

Stephane, I noticed at the top of the 'Comments' section you have a left-pointing arrow and the text:

[ - ]
Comment by October 10, 2016

Indeed!  Thanks Rick for finding this error, I have made the correction.

[ - ]
Comment by October 11, 2016

Lurker

[ - ]
Comment by October 13, 2016

Comment deleted by author

[ - ]
Comment by October 13, 2016

Looking forward to using this facility to supplement DSP research and development.

[ - ]
Comment by October 24, 2016

Looking very nice. One feature I keep looking for is the ability to click on the comment authors name to see their profile. That would be handy I think!

Thank you!

[ - ]
Comment by October 25, 2016

Yes, very good idea and on the todo list - thanks for the suggestion!

[ - ]
Comment by October 30, 2016
Some text..
[ - ]
Comment by October 30, 2016

Ok - again - i have written some comment text here -

than tried what will happen if i switch the editor to the html view and enter some valid html  structure...

hm - the editor strips all lthings away - and leaves only the demo text from inside the body tags -

also stripes all away that i had written before this experimental insertion - that happens if you experiment outside the normal 'box' ;-)

first things first:

normally i first read all comments and then will write my own - so it would be nice to have a link to the 'write a comment' tab at the bottom of the comments list.

so here again my test content:

a picture pasted with Ctrl+V from my clipboard:

it appears in the editor.. will see how it is handled after submitting..
i have looked up how it shows up in the html:

<p><img src="data:image/png;base64,iVBORw0KGgoA...rkJggg==" alt=""><br>
</p>


so this is a valid inlined base64 encoded image. should work fine in theory if the system is not stripping away the data: uri...

additionally here comes a image first saved to disk and than inserted with drag and drop into the editor:

and some code:

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gute Laune</title>
<style media="screen">
body {
display: block;
position: relative;
margin: 0;
background-repeat: no-repeat;
background-position: center top;
background-attachment: fixed;
background-size: cover;
font-size: 16px;
/* evening sun */
color: rgb(0, 0, 20);
0 0 1px rgb(255, 255, 200),
0 0 20px rgb(255, 255, 200);
background-color: rgb(255, 255, 200);
background-image:
to bottom,
rgba(0, 0, 5, 0) 0%,
rgba(255, 200, 0, 0.8) 100%
),
12em at 90% 9%,
rgba(250, 150, 0, 0.4) 0%,
rgba(0, 0, 0, 0) 100%
)
;
}
</style>
<body class="">
<div class="" >
Some text..
</div>
</body>
</html>


so thats all for now :-)

[ - ]
Comment by October 30, 2016
ok- the system is stripping away the data uri part...

that seems to be the only reason to me that this clippboard-pasted image is not working.

second thing:

iam not able to make a second top level comment - until i reload the site..

third: if i have submitted my comment it would be nice if the system switches to this comment automatically after showing me the success message a few seconds :-)

that would automatically also allow to link to a specific comment (if you handle the jump by a id attribute at the target comment and a anchor in the url.. you could also make this accessible by linking the date part of the comments headline to the comments id)

sunny greetings

stefan

To post reply to a comment, click on the 'reply' button attached to each comment. To post a new comment (not a reply to a comment) check out the 'Write a Comment' tab at the top of the comments.