Is it possible to provide Code highlighting on sites.google.com websites? - web

Is it possible to do Code Syntax highlighting on sites.google.com websites like the way we do it on Blogger.com or Wordpress.com?

Unfortunately there is until now no support for syntax highlighting within Google Sites. As a workaround you could use http://tohtml.com/ and enter your code there and copy the colored output (not the HTML) directly into your Google Sites page.
This works perfectly, as long as you don't need to edit large pieces of the code regularly.

I have tried creating a gadget myself with Google Code Prettify, and there were a few issues.
One is that classes aren't supported, so you will have to follow what Stack Overflow is doing to prettify.
http://www.codingthewheel.com/archives/syntax-highlighting-stackoverflow-google-prettify
The other problem I faced was the interaction between the iframe and the parent frame. You will notice that there is a domain permission problem, and so you will be unable to access the parent.document from your iframe.
This should save some people a few hours of hacky testing.

Yes, you can!
Just select the desired text, and go to "Formatting" -> "Code" OR "Block Code"

You can insert gadgets into Google Sites pages. You could create a gadget that did syntax highlighting using any number of open source javascript syntax highlighters.
Not an ideal solution but would get you what you want. Lemme know if you want further pointers.

I've found an alternative way.
If you use IntelliJ, just copy the code from the IntelliJ editor and paste it into your Google site text (not in html mode).
Works out-of-the-box!

Related

Sahi: Cannot execute scripts recorded in a browser in multiple browsers

Our web application is designed such that the text transform is picked from CSS.
There are multiple links on a webpage; hence i will take example of a Next link.
When i hover the mouse over Next link in FF, it shows the below code:
_click(_link("Next"));
Similarly when i hover the mouse over the same link in Chrome, it shows the below code:
_click(_link("NEXT"));
When the script is recorded in FF and executed in chrome, it fails at the location because "Next" link is unavailable. This is one example of a link and there are multiple links and multiple pages. For this scenario, do i need to verify the text for each link or is there a universal way i.e. toLowercase method that can help me.
Thanks.
As Kshitij pointed out, you can get this working by using a regular expression as your accessor... but you might also check the Alternatives pulldown in the Controller. Perhaps there's an alternative accessor that is better suited for both browsers.
I think, the question should be how can Sahi identify the element with text by ignoring the case-sensitivity.
Any tool can only record the attributes which is available on the browser at that time.
You can use the following code to achieve the functionality:
_click(_link("/Next/i"));

Live preview markdown editor

Forgive me if this is has been answered. I have looked around, but didn't find anything.
I am creating a site for non-techies and it requires them to be able to add rich text content. I have been looking at Markdown for this, and would like to use that.
I have been searching around for a nice (jquery) ui control to make editing simple, but everything I have looked at has the live preview living somewhere else on the page other than the input box. (WMD is like this, markitup, etc..)
I would like to use something that makes it feel like you are using a word processor. Like how TinyMCe does it, but running on Markdown, not HTML
Is there anything like that, or maybe somewhere that shows how to build it?
To clarify, I'm looking for an editor that makes it feel like you are typing in the live preview; not a textbox with a preview above/below.
If I get what you're looking for, then the simplest approach would be to generate HTML with TinyMCE or CKEditor, then apply something like Markdownify to the output of e.g., tinymce.getContent().
I have since found something that I love. the Pen editor on Github does just what I wanted. I am glad to see someone has taken this on
Check out Stack Edit It's a great WYSIWYG markdown editor - syncs with Google Docs, Dropbox & CouchDB, publishes to Github (and many other places), and offers easy link sharing. You can access it on their website or using the Chrome app. You can create titles and lists in the editor there, and it will show you the corresponding text in markdown format. You can then save, publish, share, or download the file.
Markdown would not be compatible with a WYSIWYG editor. Consider this sample Markdown:
Let's link to [Google][].
[Google]: http://www.google.com/
If you were making a WYSIWYG editor, what would happen after you typed [Google]? Would you see blue underlined text? Would you just see [Google] since it's not a valid hyperlink yet? What about after you type the trailing []? It's still not a fully-defined hyperlink; you can't click it, because Markdown doesn't know where it links.
And how does the user type that [Google]: http://www.google.com/ follow-up line? That line isn't displayed; it's markup; it's invisible. Where do you type invisible text into a WYSIWYG editor?

Browser based Code Editor, with real tabbing?

I'm currently using CodeMirror as a browser based code editor, but what really annoys me is its lack of real tabbing. It uses spaces instead of tabs, and I just cant get my code as clean as desktop editor.
Are there any better editors out there? It can be DOM based or Javascript or even browser specific, just as long as it gives me real tabs! :)
PS. I've had a look at Ace, which looks like it should do the job, but I cant seem to get real tabs to work - anyone tried it?
Cheers,
Chris.

Custom navigation with Liknlist web part

I'm using a standard link list web part. What I want to achieve is before my users click on the link a pop-up javascript warning box will display, stating that they are leaving the domain. In regular anchor tag I would preceed the URL with javascript:ShowWarning('http://www.youtube.com');.
I've search the AllLinks table in the database but did not find the links was looking for.
Where or how are these stored?
Thanks,
Risho
Firstly, editing the SharePoint database directly is a really bad idea. You shouldn't do it unless you really, really know what you are doing, and even then you will probably break the system.
Secondly, any change made in the data will be what shows up in the editor, and I don't think the editor supports links that don't start with "http://".
A better approach is to use jquery to add the popup behaviour to the links when the page is loaded.

Displaying code snippets in Sharepoint wiki

Is there a way to get SharePoint to display code snippets in a pre-formatted way?
Currently if you insert any code, it just looks exactly like the rest of the text. Anything would be better than nothing.
I found hilite.me which produces html styled code which you can insert into a sharpoint wiki.
It supports a number of languages and styles and is an online app.
No because MOSS's wiki is just a new page with the word "wiki" attached to the link.
Even though this is an old question, I have yet another solution that possibly didn't exist at the time the question was asked:
You can create a GitHub Gist and use the embed code for the Gist on the SharePoint wiki page. This is especially useful if you are already using Gist, want to share the code snippet in multiple places aside from the wiki, and/or want to keep a history of the code snippet separate from the rest of the wiki page.
To use an embed code without the script tags being stripped, go to Insert > Embed Code in the ribbon when editing the page:
This solution assumes that you are using an IDE that already formats the code for you.
Some of the other answers would be better if you have a raw text file.
While editing a Sharepoint Wiki page:
Copy code from IDE to new MS Word doc
Highlight all in MS Word: Ctrl+A
Copy again inside MS Word
Switch to wiki page, Paste
Continue editing wiki or save
Works fine with Eclipse as IDE. Might be able to paste straight from VS to SharePoint.
If you have code snippets you will reuse in multiple pages, Use a similar copy/paste technique to save or upload htm files into a SharePoint document library and then insert a "Page Viewer Web Part" to view the htm inside a different page.
Not that I'm aware of if you're specifically using the Wiki feature. Your wiki entries are stored like rows in a table as far as I know. If you're not using the wiki you can use the syntax highlighter tool. It's all javascript. http://code.google.com/p/syntaxhighlighter/
For several weeks we are using Telerik Rad Editor
One of the tools is "Format Code Block"
You may see it here : http://demos.telerik.com/aspnet-ajax/Editor/Examples/Default/DefaultCS.aspx
If you install the RadEditor for MOSS .. we will get this amazing tool in Wiki pages too.
So this is not a great answer but for us it was better then the default. You can write your wiki in a tool like Windows Live writer (WLW). WLW has an add in for a code formatter. If you write your wiki page via WLW with the code formatter you can then go to the Wiki page and select "edit HTML source." You can then copy from WLW to the wiki page and get good styling.
Best way I have found is to use tohtml.com
You can cut and paste your code into it and it will generate html that you can past into your sharepoint wiki
you can use prisimjs to show code snippets. When you add prisimjs and css you can use like this;
p { color: red }
if you want easier solution to use prisimjs, you can check this:
http://yasingokhanyuksel.blogspot.com.tr/2017/07/sharepoint-code-syntax-highlighting.html
If you want this for modern pages, there is the Source code content webpart from Qualitem.
https://spfxhub.com/packages/qualitem-source-code-content-web-part
Disclaimer: I am a co-developer.

Resources