I'm writing a page with examples that demonstrate the use of my js library. I'd like these examples to be editable and runnable, so I thought I have these options :
Use prettify to display code on the tutorial page, have a button that opens a new window with the editor where you can run the code (currently implemented solution). Alternatively, I can make the editor a modal dialog of some sort.
Use multiple CodeMirror editors for each example on the page (could be up to 30 on a single page). I'm not sure how "heavy" those editors are, so I'm not sure if that's a good idea.
Have an edit button that "swaps" prettyfied code with a CodeMirror editor when editing is needed, so that the user can edit and run the examples without bothering with new windows. I'm not sure if I can make prettify and CodeMIrror's syntax highlighting to look the same.
Any ideas on how I should do this and why? I'm also open to suggestions about different code editors or syntax highlighters too, so if anybody has experience with this kind of thing, please tell me how you did it.
You could use the same technique that Marijn Haverbeke (the creator of CodeMirror) uses for the online version of his javascript book. It shows code snippets, and provides an edit-button that opens a javascript console at the bottom of the screen.
Look at this chapter for an example.
Related
In Atom editor, TODOs are automatically highlighted with atom/language-todo package, and I can change the style using user stylesheet. That much I know.
So I'm developing a webpage right now, and have to simultaneously work with HTML, CSS, and JS. However it seems that TODOs are only highlighted for HTML and CSS files, not JS files. This is strange because in the settings for atom/language-todo, the scope for all triggers are .html.php.text - HTML is included; CSS and JS are not. So reasonably thinking, either both CSS and JS should have highlight enabled, or both should have it disabled.
What is causing this strange behavior? Is there anything I can do to enable highlighting for JS?
P.S. Currently mrodalgaard/atom-todo-show is my alternate solution. It's quite good but I would still like to have my highlights.
This problem is probably related to this open issue on the atom/language-todo repository: https://github.com/atom/language-todo/issues/82.
As someone suggests in the issue conversation, the todo highlighting can be restored by disabling Atom tree-sitter in the settings:core page.
For more information on how the tree-sitter improves code parsing, see the release article on the Github blog
I recently added TinyMCE 4.0b2 to a web application I've been developing.
I needed to have visual aids turned on for editing, however turned off when printing and spent a fair amount of time looking for a solution through their forums, StackOverflow and google to no avail!
So... I decided to investigate the issue myself!
To get this to work I had to manually 'adjust' the print command of the print plugin.
The following fix applies to TinyMCE v.4.0b2, the version available at time of writing; it may or may not work with previous and future versions of TinyMCE.
The print plugin file can be found in the js/tinymce/plugin/print/ directory.
Open the plugin.min.js file in your favourite editor and you'll see something like this:
tinymce.PluginManager.add("print",function(e){e.addCommand("mcePrint",function(){e.getWin().print();}),e.addButton("print",{title:"Print",cmd:"mcePrint"}),e.addMenuItem("print",{text:"Print",cmd:"mcePrint",icon:"print",shortcut:"Ctrl+P",context:"file"})});
After poking around the tinymce source code I found the hasVisual editor property and mceToggleVisualAid command. I then added these two to the printing plugin as
if(e.hasVisual){e.execCommand("mceToggleVisualAid");}
just prior to the code calling
e.getWin().print();
The finished product looks like so:
tinymce.PluginManager.add("print",function(e){e.addCommand("mcePrint",function(){if(e.hasVisual){e.execCommand("mceToggleVisualAid");} e.getWin().print();}),e.addButton("print",{title:"Print",cmd:"mcePrint"}),e.addMenuItem("print",{text:"Print",cmd:"mcePrint",icon:"print",shortcut:"Ctrl+P",context:"file"})});
I hope this helps someone struggling with this issue in future.
I used tumblr's javascript embed code to embed my posts into an external website. Now I want to style the posts. Where can I find the full list of tags, classes, and all of that in order to do this? I see people posting some of the tags, for exampe ol.tumblr_posts, but no one has said how or where they actually found out that's the tag tumblr is using for that particular element.
Someone mentioned using the web developer extension in Firefox to pull out the HTML associated with the javascript file but I can't use Firefox so I need another suggestion? I did go to tumblr's docs but the tags and everything used for customizing themes WITHIN tumblr seem to be different from the ones used to display posts outside of tumblr.
I also looked around in the api section and didn't see anything that lists all of the tags. Thanks!
UPDATE: Here's a post that discusses what I'm talking about but none of the people giving answers that show what tags to use to format the script's output say how or where they got the tags.
tumblr javascript embed with css skin
This website is the one that said to use the FF add on but again, the person who figures out how to find the tags using it doesn't say HOW, they just say it worked. I'm finally in a place where I can use Firefox so I installed this web developer thing and I still don't see where I would go to see the info that shows the actual html with all the styles instead of just showing the link to the js code.
http://forums.macrumors.com/showthread.php?t=745299
Chrome and Opera's developer console is CTRL + SHIFT + I... try looking in the source there
IE's dev tools is f12 if you can't use Chrome
Also: I'm not sure if this is what you're talking about but I'll throw in this link for good measure:
http://www.tumblr.com/docs/en/custom_themes
I figured it out! Unfortunately, the only way I could do this was to use the Firefox Web Developer Toolbar Add-On. Once you have that installed, you go to the webpage where you've embedded your blog's javascript code.
Then, in the Firefox toolbar, there should be a tab that says "Miscellaneous". Click on that, then click on "Edit HTML". A new pane opens up towards the bottom of the browser. Inside, it will show the source of the webpage INCLUDING the information that the javascript code generates, which shows the classes, html, and all of that.
It's still not a ton that you can customize compared to using the api (which I don't know how to do) but it's a start. Thanks everyone!
im writing a chrome extension and need a simple text editor component so that users can edit simple notes in the extension.
required:
clickable links, but without any sort of modal dialog. its sufficient if any "http://.." substrings can be turned into actual clickable links of any sort (ie. divs styled like links and with onclick handler are fine)
undo/redo functionality
tab indent/outdent of a single line or multiple selected lines simultaneously
seamless switch between editing/displaying, ie. no save buttons or reflowing or the like (counterexample)
dont need any kind of formatting capabilities apart from indenting, just plain text (counterexample)
html/js that works on chrome
i have looked at/tried:
<textarea/>: undo included and tab indent easy to implement, but no way to do links
<div contenteditable="true">: undo broken, tab indent=hell (selections and ranges), but links work fine. also have set white-space: nowrap; to show indent spaces. this is my current solution but its very buggy, maybe ill have to open another question just for this.
tinymce: overkill i guess
markitup: looks good, but since it is a textarea, i figure no links possible
ACE: looks promising, worth a shot? not overkill?
kix-standalone demo doesnt work on chrome (ironically)
any comments or answers very appreciated..
edit: i have used codemirror 1 in my project (Syncpad for Simplenote Chrome extension) and i am quite content with it. CodeMirror provided alot of additional infrastructure for text editing (esp live parsing) which i wouldnt want to miss anymore. Will be updating to codemirror 2 when i have the time
How about CodeMirror? I don't think it will do links, but it's nicely engineered and you may be able to extend it.
my problem is that, i what to develop a firefox plugin that extract data from the textbox and it has to be stored in some temporary memory.
i didn't have any idea about plugin's So please give the solution in a detailed manner
thank u.......!
Try reading the extension documentation, and then asking specific questions about things you still don't understand. It sounds like you are asking someone to write the whole extension for you, which isn't really the purpose of SO.
You could also look for open-source extensions that interact with text fields (like one of the ones that allows editing a text field in an external editor) and see how they work.
Have you seen the "It's all text" plugin? It allows you to edit a textarea in your editor of choice. After saving, the textarea is updated. I'm sure there's some code in that plugin that you could use.
Also, what you're describing sounds really simple. Are you sure a plugin is the right solution? Maybe a Greasemonkey script would be easier.