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.

 

  • + 10
  • 0
  • 685
  • 13

Comments

Good! Now it would be good if we would be able to sort comments based on rating (as on reddit)

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.

And there is new "Separate teaser button in WYSIWYG editor to insert tag to separate annotation from the rest of the text.

Use it to manage annotation paragraph which readers see in the list of posts on the main page.

I am having a really hard time embedding an image in a post.  I tried uploading to Google Drive and give view rights to the world but adding a link to it or even editing the HTML to put it in an iframe isn't working.  Is there a simpler way I am missing?

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.

Ahhh ... thanks Evgeny - that is the easier way I was missing :)  We might want to have the button renamed from "Upload file" to "Upload/Insert Image" as that would make it much more intuitive.

To highlight the code you also can simply go into post's html source (press source button or "disable rich text") and insert your code between pre and code tags, like it is shown in the shot