Article
· Feb 15, 2016 2m read

How to highlight Caché ObjectScript, work with htm, add image in the post and other questions

Hi, Community!

We've updated Developer Community (DC) portal and here are some good news.

Now you can insert in your post highlighted parts of code. It works with help of highlight.js library.

To illustrate it I took some code snippets from Fabian's article.  

 
Method OnPreServer() As %Status
{
 set ..SharedConnection=1
 set room=$GET(%request.Data("room",1),"default")
 set:room="" room="default"
 if (..WebSocketID'="")
  {
   set ^CacheTemp.Chat.WebSockets(..WebSocketID)=""
   set ^CacheTemp.Chat.Room(..WebSocketID)=room }
 else
  {
   set ^CacheTemp.Chat.Error($INCREMENT(^CacheTemp.Chat.Error),"no websocketid defined")=$HOROLOG
  }
 Quit $$$OK
}
 

To paste formatted text do following:

  • Insert the code into the post and select it.
  • Click on Format(2) button in Editor (left corner or 2 in the shot) and mark code as Formatted.
  • Click on Styles (3) and choose Computer Code.

Your code should be automatically highlighted in a preview. It works not only for COS but for all the languages which are supported by higlight.js.

If you have code snippet which is not automatically highlighted like this one do the following:

  • Turn html mode (Source(1) button).
  • Put class="COS" parameter into code tag and get the highlighted COS.
Method Server() As %Status 
{
 job ..StatusUpdate(..WebSocketID) for
 {
  set data=..Read(.size,.sc,1) 
  if ($$$ISERR(sc)) { 
    if ($$$GETERRORCODE(sc)=$$$CSPWebSocketTimeout) { 
                  //$$$DEBUG("no data") } 
    If ($$$GETERRORCODE(sc)=$$$CSPWebSocketClosed){
     kill ^CacheTemp.ChatWebSockets(..WebSocketID) 
     do ..EndServer() 
     Quit // Client closed WebSocket 
     } 
   } 
  else {
   set mid=$I(^CacheTemp.Chat.Message) 
   set sc= ##class(%ZEN.Auxiliary.jsonProvider).%ConvertJSONToObject(data,"%Object",.msg)
   set msg.Room=$G(^CacheTemp.Chat.Room(..WebSocketID))
   set msg.WSID=..WebSocketID //meta data for the message
   set ^CacheTemp.Chat.Message(mid)=msg.$toJSON()
   job ..ProcessMessage(mid)
   }
 }
Quit $$$OK
}

 

Or, you can simply disable rich-text and embrace your code part into two tags: pre and than code, like it is shown in the shot:

 

 

How to add annotation for the post?

Again we need <!--break--> tag. Click on Source button and place the tag into html code of the post in your desired place.

Here are the Editor's buttons on the shot:

  1. Source, 
  2. Format,
  3. Styles.

How to add an image to the post?

Press upload image button in the editor (see the screenshot) and the image will be uploaded to your post.

You can adjust the Width of the image. To do this click on the image and then click on the image settings button (see the shot):

Width 600 is preferrable.

Discussion (13)3
Log in or sign up to continue

Cool markdown, is nearly here.
Well, but it is not so clear, that Disable rich-text, means markdown.

But there are some errors, in markdown.

~~strikethrough~~, >! spolier    does not work at all,

A [link](http://example.com). shows as  

 

When I press Preview button, in editing new post, after reload, editor opens in rich-mode and brakes all my markdown. And I think we need preview button, or live preview for markdown in comments.

I am going to answer my own question with a nice workaround that I found:

1) Save the image locally

2) Upload the image to the post you are authoring (you need to click "Change Additional Settings" to get to the Upload option

3) Under Associated Documents there is a link to the new image that was uploaded - right-click it and save the url

4) Now go to the Image icon in your post and paste in the url to the image you just uploaded

This allows you to not have to mess with 3rd party file hosting systems.  However it is still very ugly compared to just pasting an image into the editor :(  Hopefully this will be made easier at some point in the future.

NOTE:  Unfortunately this workaround can't be used to add an image to a comment.

Hi, Benjamin! Thanks!

There was also DC update last week Paul mentioned about new button in WYSIWYG editor. 

You can click upload button (red circle in a screenshot) and image will be uploaded to your message in the place of cursor.

Of course it is good to stretch it to 600px - you can do it if you select all the image and click image button (red rectangle in screenshot) and set image's widh.

I did it to the screenshot of the post.