Displaying code in blog posts [closed] - javascript

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
What libraries and/or packages have you used to create blog posts with code blocks? Having a JavaScript library that would support line numbers and indentation is ideal.

The GeSHi text highlighter is pretty awesome. If you're using WordPress, there's a plugin for you already

A simple Google query reveals http://code.google.com/p/syntaxhighlighter/
From initial looks it seems pretty good. Entirly JS based so can be implemented independent of the server side language used.

Syntax Highlighter is used by wordpress and produces nice results.

Copy Visual studio code as HTML http://www.jtleigh.com/people/colin/software/CopySourceAsHtml/

I use Live Writer and I use VS addin that copies source code as html to copy the code and then I change into HTML view in Writer and paste the result
you can download the addin at:http://blogs.microsoft.co.il/blogs/bursteg/archive/2007/11/21/copy-source-as-html-copysourceashtml-for-visual-studio-2008-rtm.aspx

Some time ago I've done some research on this topic and came to the conclusion that using GeSHi is the way to go. However recently I've been looking to some more alternatives:
Using Windows Live Writer with a syntax highlighter plugin (there are several available)
Using the syntaxhighlighter library or the google code prettify library. Both are written in JS and I think the second one is used on stackoverflow
Use some intermediate process, where I write the posts in Markdown for example and let a program generate the final HTML

Personally, I use this website to do it for me: http://puzzleware.net/codehtmler/default.aspx

If that's my own code, I would just use SciTE's export to HTML and paste it.
Otherwise (highlighting code like it is done here), I would prefer to do it on server side: JS highlighting (as seen, for example, on JavaLobby) happens after the page have been displayed in default mode (so there is a sudden change of look, not very nice), and is often slow, plus JS can be disabled.
Actually, such task can be done once, after user input, it doesn't need to be done over and over on each page served to visitor.

I usually use this free online tool that formats C# code. Along with C#, it also formats code for VB, HTML, XML, T-SQL and MSH (code name Monad).

Related

Is there a code generator for Cypress testing tool [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 11 months ago.
Improve this question
I have been studying Cypress testing tool. I have huge front end flow to test . Writing so much JS code will be tough .
So i want to know if there is a code generator that records/generates code tests.
I know a tool Snaptest - snaptest.io . However this tool generates code in NightWatchJS and Chromeless only . the Cypress framework is disabled .
i found this - https://github.com/cypress-io/generator-node-cypress
But i am not sure what this does .
So i want to know if there is any alternate recorder/generator for generating code to use in Cypress .
Suggestions ? Thanks .
Yes, it looks like there is a good attempt to create a scenario recorder and it works to a great extent:
https://chrome.google.com/webstore/detail/cypress-scenario-recorder/fmpgoobcionmfneadjapdabmjfkmfekb/related?hl=en
2021 Update
There have been generators available for a while that the other answers mention. I originally answered this in August 2018, at which time there were no generators available. I still stand by my advice below.
Original answer
To answer your question:
No
To provide you unsolicited advice:
Testing a huge flow throughout your front end is an anti-pattern in Cypress. They (and I) recommend breaking that up into a spec for each page, then only add small tests to that spec for the actions that you perform on that page. You will also want to mock, stub, or otherwise programmatically set up and tear down the required state for that spec to run.
See this page and watch the linked YouTube video to get a better idea. https://docs.cypress.io/guides/references/best-practices.html#Organizing-Tests-Logging-In-Controlling-State
I have a long history of using selenium with page objects and workflows. I fought this idea for a while when I started using Cypress but have drank the kool-aid and find it is MUCH better this way.
There is a built-in recorder inside the Cypress Support Pro plugin for IntelliJ platform (IDEA, Webstorm etc.)
It allows recording UI action inside the Cypress Runner and insert the generated code directly to your case in IDE.
Also, recorder has pluggable architecture that make it easy to extend or replace code-generation logic. By default, it uses the scripts from KabaLabs / Cypress-Recorder.
Here is a brief video overview of recorder: https://www.youtube.com/watch?v=FgnHYwmguFI
You can try plugin for free here: https://plugins.jetbrains.com/plugin/13987-cypress-support-pro (or just install it via settings -> plugins menu in IDE)
Self-promotion disclosure: I'm the author of this paid plugin.
There is a new Cypress Recorder extension (different from the one posted above) that we have created that we feel may be closer to what you are asking for than the previously posted one above.
https://chrome.google.com/webstore/detail/cypress-recorder/glcapdcacdfkokcmicllhcjigeodacab
Please feel free to let us know what you think.
According to this issue on Github, a test recorder has been proposed but is not currently a feature in Cypress.
"Cypress Studio provides a visual way to generate tests within the Test Runner, by recording interactions against the application under test."
https://docs.cypress.io/guides/core-concepts/cypress-studio
I know it's a little late but.
I just saw Preflight's Cypress recorder and it works like a magic creates perfect css selectors and adapts to ui changes (updates the script automatically), it even creates email testing scripts automatically.
https://cypress.preflight.com
In my personal opinion it's way better than Katalon

How to implement Google doc like text editor? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I opened a google doc, it seems that the google doc is not a simple text area .... it seems that this is a customize stuff.... is there any library for doing that kind of things?
Most editors use the contentEditable property. Simply setting it on any HTML element enables editing, copy&paste, spell checking, formatting etc. in modern user agents.
However, google docs specifically does not use contentEditable. Instead, they implemented their own rendering engine in JavaScript. Unless you plan a project on the scale of google docs (i.e. you have at least, say, 3 people willing to work full-time on the rendering engine), contentEditable is the way to go.
new Google Docs is totally different for everything else like tinyMCE, ckEditor and similars. Here is an article describing some of the technologies behind it : http://news.softpedia.com/news/Google-Details-the-Powerful-Technology-Behind-the-New-Docs-Editor-141804.shtml
quoted from the article: “To get around these problems, the new Google document editor doesn’t use the browser to handle editable text. We wrote a brand new editing surface and layout engine, entirely in JavaScript,” Jeff Harris, product manager, Google Docs.
It's amazing how there isn't any open source implementation and people are not aware of this.
The short answer is that they implemented every single logic that a graphic text editor would do, in plain javascript (from layout, to rendering, to everything else)
Google Wave pioneered much of what google docs has, though the models are completely different. Start research there, as there is much to learn.
If you are just trying to do something simpler than structured documents, mobwrite, etherpad or one of its forks could suit.
The editor can be tricky and essentially involves building an entire word processor in javascript. Some examples of this are around.
With any kind of editor you have a line or element buffer, which you must mirror onto the realtime api of choice.
This can be done with Google drive's realtime API.
Modification events have to be handled in both directions. Local model changes propagating to the realtime model and vice versa. Modifications to the local model can get rendered as they happen.
Cursors can be handled by having pointers on the source buffer, such as Index Reference.
The server can be implemented in a number of ways, but will require an operational transformation model supporting common structures. Wave protocol's site has an example using an xml model.
Ritzy is a new open source rich text editor that contains a custom javascript surface and layout engine just like Google Docs. Take a look at it's source for some ideas.
It is based on Facebook React and SwarmJS and is primarily intended for embedding into applications to support rich text entry with real-time collaboration.
As far as I know, this is the first open source implementation of this technique. Note that this is pretty new and hasn't seen any real-world testing/usage, so there are some known bugs and likely lots of unknown ones as well.
Disclaimer: I am the author of the above-mentioned project.
If you use the element inspector (Tools>Developer Tools on chrome, or the Firebug extension for Firefox) then you can see what techniques they used to implement it.
How you implement it is the same as anything - break up the tasks into small enough units that you can understand each one, understand how the units act in concert to realise the system, then implement the units and put them together.
<!DOCTYPE html>
<html>
<head>
<script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
<script>tinymce.init({ selector:'textarea' });</script>
</head>
<body>
<textarea>Next, get a free TinyMCE Cloud API key!</textarea>
</body>
</html>

Gantt Chart online [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 9 years ago.
Improve this question
I need to insert a horizontal bar chart in a web page. The thing I have to do is very similar to a Gantt Chart.
I'd like to use a javascript library for the purpose. I tried jsgantt, but actually it is not very beautiful.
I could evaluate also a server generation of the graph. In case my server side language is Python.
It will be part of an internal project with no internet access, so Google Charts isn't an option.
Have a look at the flot jQuery plugin:
Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side.
The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking.
The library can produce bar graphs, and is used by our host site - have a look at Stack Overflow Reputation History page.
This is a complete jQuery based Gantt Editor Mit licensed
http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/
If you want a "complete" review of available ones see here:
http://roberto.open-lab.com/2012/06/14/the-javascript-gantt-odyssey/
I Have recently added SVG based drawing and collapse/expand tree functionality.
See http://roberto.open-lab.com/2014/05/15/jquery-gantt-editor-collapsible-branches/
For me, the best is http://gantter.com/ you don't need registration process, it exports to msproject or pdf.... perfect!
Try one of this:
http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml - neat chart, option to edit tasks, one serious drawback: lacks timescale change
http://dojotoolkit.org/reference-guide/dojox/gantt.html - free (!!), quite nice, but very hard to customize (unless you modify the source code)
http://bryntum.com/gantt/ - so far, one of my favourites - very easy to customize, but licensing for commercial projects is unclear, you can download trial for 45 days
http://www.tgantt.com/treegrid/www/Gantt.html - actually, this one looks like a space vessel's dashboard and so it is to configure, still struggling to put this in my application
Have a look at http://www.ext-scheduler.com. 100% JavaScript, based on ExtJS. Disclaimer: I wrote it.
JQuery Gantt Chart - the best I tested
I noticed that RadiantQ's jQuery Gantt Chart Package is missing in this discussion. This is relatively new, but has a lot of features, customizable and can be bound to any kind of data. The online demo is here.
For Gantt chart generation see:
http://www.mechanicalcat.net/tech/pytaskplan/
http://www.strout.net/python/piddle/
http://opensched.sourceforge.net/
or there are general charting libs like
http://matplotlib.sourceforge.net/
http://home.gna.org/pychart/
or may be just use gnuplot.
see also Open Flash Chart
it gives support helpers also for the most popular programming languages.
You could use FusionWidget at http://www.fusioncharts.com/widgets/gallery.asp. It's not free, but its Gantt chart works greatly for me.
Maybe you can get some impressions of how it could be done by these examples:
http://www.yuml.me/
http://creately.com/
http://www.chartle.net/
http://www.lovelycharts.com/
http://www.icharts.net/
https://scrumy.com/
http://chartgizmo.com/
http://www.archimy.com/
http://www.gliffy.com/
I hope these are enough for some inspiration.
I like this one, is still under development, "use it at your own risk" but it's very drag and drop
http://ganttapp.appspot.com

Is there any good Markdown Javascript library or control? [closed]

As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 9 years ago.
I want to build a site where the user can enter text and format it in Markdown. The reason I'd like a Javascript solution is because I want to display a live preview, just like on StackOverflow.
My site is not targeted at developers, however, so an editor control would be ideal.
I gather that on StackOverflow, the WMD editor is being used.
A quick search on Google also turns up Showdown library, which I think is actually being used by WMD.
Are there any other options? Are WMD/Showdown great tools already? What have been your experiences with the different options?
We've been pretty happy with WMD. There are a few niggling bugs in it, however. Nothing major, but I would love if John Fraser (the author) made the code open source so we can fix some of them. He's promised to do so but other real life projects are getting in the way.
I do follow up with John every week. I'll post on the blog once the WMD source is finally available. Haven't been able to contact John Fraser in over a year now.
We have open sourced both the JavaScript Markdown library
http://code.google.com/p/pagedown/
and the server-side C# Markdown library
http://code.google.com/p/markdownsharp/
If you're not averse to using Ajax to generate the live preview, then another option is markItUp!. markItUp! is a universal markup-editor, and very flexible. It does provide
an easy way of creating a markup editor, but unlike WMD, it doesn't provide its own live preview.
I used markItUp!, along with a simple JSP (using MarkdownJ) for one of my open-source projects (a Markdown plugin for Roller). If you're using another server-side technology, replace that simple JSP as appropriate.
I actually starting using this before I came across WMD. I'd agree, WMD is great, but has only just been open-sourced and is, at this stage, more difficult to customize the behavior of.
I would recommend marked, which is lightweight, efficient, easy to use and supports GitHub Flavored Markdown (GFM) as well. It can be used in either server(nodejs) or client(browser) sides.
As far as I know there really isn't any other browser-based editor for Markdown, at least none as extensive as the WMD editor.
Showdown is a Markdown converter in JS, which forms the basis for the HTML preview of WMD. They're both made by http://attacklab.net/.
And as far as I know there haven't been any big complaints about both (at least not on the Markdown mailing list). So go for it.
There is one named Showdown and it is currently hosted here: https://github.com/coreyti/showdown
And there is https://github.com/evilstreak/markdown-js :)
Strapdown.js, which was recently released, "makes it embarrassingly simple to create elegant Markdown documents. No server-side compilation required."
I've not tested this, but here is another option:
Markdown wysiwyg
The question is even more ancient now but also even more relevant since much of the mentioned code is several years out of date.
However, I did find a few that still seems current:
Jquery-Markedit - This was forked from wmd-edit quite some time ago and refactored to use jQuery. Seems good at first sight.
EpicEditor - is also still maintained, has a flexible parser and, as you can see below, the author is highly responsive (see below). IT seems to have good documentation as well. Sadly not working with IE9.
MarkdownDeep is a third option that is still current. The interesting point with this one is support for Markdown Extra. Has a dependency on JQuery (actually you can also implement without JQuery). Based on the .NET version so documentation is more aligned to that than the JS version. This also works with IE9. It is very easy to use (with JQuery) & very simple. No significant development happening with this though as far as I can see.
js-markdown-extra is a fairly accurate port of the PHP library and is still under maintenance. It supports Markdown Extra of course.
The question is ancient but hopefully this might help someone. I have just recently published a working version of my own Javascript markdown editor, uedit. You can find the source code here. It works on most browsers (including IE6+) and doesn't depend on any external JS libraries.
After trying with several plugins to solve my own needs of offering a MarkDown seudo-WYSIWYG I ended implementing my own one:
http://fguillen.github.com/MDMagick/
Maybe is not as powerful as all the solutions commented here but I think that none is as simple and easy to integrate and customize.

JavaScript editor within Eclipse [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 4 years ago.
Improve this question
I'm looking for the best JavaScript editor available as an Eclipse plugin. I've been using Spket which is good. But, is there more better one?
Eclipse HTML Editor Plugin
I too have struggled with this totally obvious question. It seemed crazy that this wasn't an extremely easy-to-find feature with all the web development happening in Eclipse these days.
I was very turned off by Aptana because of how bloated it is, and the fact that it starts up a local web server (by default on port 8000) everytime you start Eclipse and you can't disable this functionality. Adobe's port of JSEclipse is now a 400Mb plugin, which is equally insane.
However, I just found a super-lightweight JavaScript editor called Eclipse HTML Editor Plugin, made by Amateras, which was exactly what I was looking for.
Disclaimer, I work at Aptana. I would point out there are some nice features for JS that you might not get so easily elsewhere. One is plugin-level integration of JS libraries that provide CodeAssist, samples, snippets and easy inclusion of the libraries files into your project; we provide the plugins for many of the more commonly used libraries, including YUI, jQuery, Prototype, dojo and EXT JS.
Second, we have a server-side JavaScript engine called Jaxer that not only lets you run any of your JS code on the server but adds file, database and networking functionality so that you don't have to use a scripting language but can write the entire app in JS.
Try the Vjet Javascript IDE from ebay (installation)
Ganymede's version of WTP includes a revamped Javascript editor that's worth a try. The key version numbers are Eclipse 3.4 and WTP 3.0. See http://live.eclipse.org/node/569
There once existed a plugin called JSEclipse that Adobe has subsequently sucked up and killed by making it available only by purchasing and installing FlexBuilder 3 (please someone prove me wrong). I found it to worked excellent but have since lost it since "upgrading" from Eclipse 3.4 to 3.4.1.
The feature I liked most was Content Outline.
In the Outline window of your Eclipse
Screen, JSEclipse lists all classes in
the currently opened file. It provides
an overview of the class hierarchy and
also method and property names. The
outline makes heavy use of the code
completion engine to find out more
about how the code is structured. By
clicking on the function entry in the
list the cursor will be taken to the
function declaration helping you
navigate faster in long files with
lots of class and method definitions
The new release of Eclipse (Helios) has an especific package for javascript web development. I haven't tried it yet, but it certainly worth a look.
Didn't use eclipse for a while, but there are ATF and Aptana.
Oracle Workshop for WebLogic (formally BEA Workshop) has excellent support for JavaScript and for visually editing HTMLs. It support many servers, not only WebLogic, including Tomcat, JBoss, Resin, Jetty, and WebSphere.
It recently became free, check out my post about it. Given that it was an expensive product not long ago, I guess it's worth checking out.

Categories

Resources