Coders, we didn't forget about you! Introducing syntax highlighting! by tngflx

View this thread on steempeak.com
utopian-io · @tngflx · (edited)
$70.80
Coders, we didn't forget about you! Introducing syntax highlighting!
<h5>Repository</h5>
https://github.com/tngflx/Steem-UltimateEditor

<h2>What is Steem Ultimate Editor?</h2>
<center>![ultedtlogosmall.png](https://steemitimages.com/DQmb4o1dHzre7hpQFp2Rkz93bDgghiiBDWiHQzZd3XLPCWC/ultedtlogosmall.png)</center>

Steem Ultimate Editor poised to replace markdowns with simple buttons to create a post! Creating post shouldn't be so troublesome and requires a significant amount of time on trial and error. What if I tell you, there's a tool that allows you to just click buttons in order to perform some basic and even advance customization to the style of your post? Let's have a look what Steem Ultimate Editor brought to the table this time after an improvement over the last version. Which you can check out here. 

<h2>Objectives</h2>
- Allow minnows or newcomers to have a more friendly environment to create posts
- Significantly reduce the amount of time taken to create a post
- Beautify your post within clicks!
- Promoting high quality posts with future features such as source checking

## Feature for the day : Syntax highlighting
Don't you wish your codes are color coded and easy on the eye to differentiate if it's a function, an integer or some html tags? It can be uneasy to spot mistakes in your pasted code. With color coding, editing your code can be much hassle free!

<h5>Color coding on the fly! Everything between triple ticks will be color coded!</h5>
<iframe src="https://player.vimeo.com/video/273701920" width="640" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<h5>Like always it worked perfectly on steemit post too! Not to mention the layout.</h5>

<iframe src="https://player.vimeo.com/video/273701280" width="640" height="346" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The hardest part of this feature is to get the caret back to where it was. For unknown reason, it always jump to the beginning of paragraph.

```
function rangeToPlainText(aRange) {
      // line delimiter is automatically detected by the browser
      // for each platform.
      var prettyText = window.getSelection().toString();
      var linesDelimiter = /(\r?\n)/.test(prettyText) ? RegExp.$1 : '\n';

      var text = '';
      var target = aRange.startContainer;
      if (target.nodeType == target.ELEMENT_NODE &&
          !/^(img|br)$/i.test(target.localName))
        target = target.childNodes[aRange.startOffset];

      var targets = editableNodes();
      var initialTarget = target;
      for (target of targets)
      {
        if (initialTarget) {
          if (target != initialTarget)
            continue;
          initialTarget = null;
        }

        if (target.nodeType == target.TEXT_NODE) {
          let value = target.nodeValue;
          if (target == aRange.endContainer)
            value = value.slice(0, aRange.endOffset);
          if (target == aRange.startContainer)
            value = value.slice(aRange.startOffset);
          text += value;
}
```

## Technology Stack

Jquery, HTML, Handlebars, Javascript

## Roadmap

-Emojis (checked)
-New banner (checked)
-Chat integration?
-You name the features :)

## How to contribute?
-Contact me personally on discord or comment below!
๐Ÿ‘  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 28 others
properties (23)
post_id51,932,575
authortngflx
permlinkcoders-we-didn-t-forget-about-you-introducing-syntax-highlighting
categoryutopian-io
json_metadata"{"links": ["https://github.com/tngflx/Steem-UltimateEditor"], "app": "steemit/0.1", "image": ["https://steemitimages.com/DQmb4o1dHzre7hpQFp2Rkz93bDgghiiBDWiHQzZd3XLPCWC/ultedtlogosmall.png"], "format": "markdown", "tags": ["utopian-io", "development", "dev", "steemdev", "teammalaysia"]}"
created2018-06-06 14:37:51
last_update2018-06-10 02:18:09
depth0
children8
net_rshares24,296,282,433,269
last_payout2018-06-13 14:37:51
cashout_time1969-12-31 23:59:59
total_payout_value53.498 SBD
curator_payout_value17.304 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length3,248
author_reputation12,492,997,891,187
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (92)
@nikema ·
$0.09
I love this. This is my first time seeing one of these updates. Is image uploading an included feature? Iโ€™m building some apps that are front-ends for the blockchain. Iโ€™m interested in using your editor for post composition. So far Iโ€™m using simpleMDE and itโ€™s pretty good.
๐Ÿ‘  
properties (23)
post_id51,933,456
authornikema
permlinkre-tngflx-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180606t144541346z
categoryutopian-io
json_metadata"{"app": "steemit/0.1", "tags": ["utopian-io"]}"
created2018-06-06 14:45:42
last_update2018-06-06 14:45:42
depth1
children2
net_rshares30,766,260,254
last_payout2018-06-13 14:45:42
cashout_time1969-12-31 23:59:59
total_payout_value0.084 SBD
curator_payout_value0.003 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length273
author_reputation945,269,304,874
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@tngflx · (edited)
Yes I integrated with ipfs! Thanks for your interest! Well once I released it, I'll let you know. Right now, I'm trying to add more features to it before I really launch it. I'm thinking of adding dictionary, todo list feature and etc.
properties (22)
post_id51,933,761
authortngflx
permlinkre-nikema-re-tngflx-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180606t144820174z
categoryutopian-io
json_metadata"{"app": "steemit/0.1", "tags": ["utopian-io"]}"
created2018-06-06 14:48:21
last_update2018-06-06 14:49:36
depth2
children1
net_rshares0
last_payout2018-06-13 14:48:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length235
author_reputation12,492,997,891,187
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@nikema ·
$0.09
Awesome ๐Ÿ‘๐Ÿพ Iโ€™ll be watching out for it.
๐Ÿ‘  
properties (23)
post_id51,933,880
authornikema
permlinkre-tngflx-re-nikema-re-tngflx-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180606t144923467z
categoryutopian-io
json_metadata"{"app": "steemit/0.1", "tags": ["utopian-io"]}"
created2018-06-06 14:49:24
last_update2018-06-06 14:49:24
depth3
children0
net_rshares30,150,935,049
last_payout2018-06-13 14:49:24
cashout_time1969-12-31 23:59:59
total_payout_value0.085 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length39
author_reputation945,269,304,874
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
author_curate_reward""
vote details (1)
@codingdefined ·
$0.08
Thank you for your contribution. Its a good feature to have but is the Editor supports all type of languages?

Your contribution has been evaluated according to [Utopian policies and guidelines](https://join.utopian.io/guidelines), as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, [click here](https://review.utopian.io/result/3/2332334).

---- 
Need help? Write a ticket on https://support.utopian.io/. 
Chat with us on [Discord](https://discord.gg/uTyJkNm). 
[[utopian-moderator]](https://join.utopian.io/)
properties (22)
post_id52,329,893
authorcodingdefined
permlinkre-tngflx-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180609t115714472z
categoryutopian-io
json_metadata"{"links": ["https://join.utopian.io/guidelines", "https://review.utopian.io/result/3/2332334", "https://support.utopian.io/", "https://discord.gg/uTyJkNm", "https://join.utopian.io/"], "tags": ["utopian-io"], "app": "steemit/0.1"}"
created2018-06-09 11:57:15
last_update2018-06-09 11:57:15
depth1
children1
net_rshares0
last_payout2018-06-16 11:57:15
cashout_time1969-12-31 23:59:59
total_payout_value0.067 SBD
curator_payout_value0.015 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length600
author_reputation71,157,752,447,147
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@tngflx · 
It support the major languages for now. For example js, ruby, php. This is actually based on the highlight js library. The common languages are supported there.
properties (22)
post_id52,332,344
authortngflx
permlinkre-codingdefined-re-tngflx-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180609t122202551z
categoryutopian-io
json_metadata"{"tags": ["utopian-io"], "app": "steemit/0.1"}"
created2018-06-09 12:22:03
last_update2018-06-09 12:22:03
depth2
children0
net_rshares0
last_payout2018-06-16 12:22:03
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length160
author_reputation12,492,997,891,187
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@utopian-io · 
Hey @tngflx
**Thanks for contributing on Utopian**.
Weโ€™re already looking forward to your next contribution!

**Contributing on Utopian**
Learn how to contribute on <a href='https://join.utopian.io'>our website</a> or by watching <a href='https://www.youtube.com/watch?v=8S1AtrzYY1Q'>this tutorial</a> on Youtube.

**Want to chat? Join us on Discord https://discord.gg/h52nFrV.**

<a href='https://v2.steemconnect.com/sign/account-witness-vote?witness=utopian-io&approve=1'>Vote for Utopian Witness!</a>
properties (22)
post_id52,413,747
authorutopian-io
permlinkre-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180610t021208z
categoryutopian-io
json_metadata"{"app": "beem/0.19.29"}"
created2018-06-10 02:12:09
last_update2018-06-10 02:12:09
depth1
children0
net_rshares0
last_payout2018-06-17 02:12:09
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length503
author_reputation152,913,012,544,965
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@minnowsupport · 
<p>Congratulations!  This post has been upvoted from the communal account, @minnowsupport, by Felix at(tngflx) from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows.  Please find us at the <a href="https://discord.gg/HYj4yvw"> Peace, Abundance, and Liberty Network (PALnet) Discord Channel</a>.  It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.</p> <p>If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=102530.639667%20VESTS">50SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=205303.639667%20VESTS">100SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=514303.639667%20VESTS">250SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=1025303.639667%20VESTS">500SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=2053030.639667%20VESTS">1000SP</a>, <a href="https://v2.steemconnect.com/sign/delegateVestingShares?delegator=&amp;delegatee=minnowsupport&amp;vesting_shares=10253030.639667%20VESTS">5000SP</a>. <br><strong>Be sure to leave at least 50SP undelegated on your account.</strong></p>
properties (22)
post_id52,414,152
authorminnowsupport
permlinkre-coders-we-didn-t-forget-about-you-introducing-syntax-highlighting-20180610t021721z
categoryutopian-io
json_metadata"{"app": "beem/0.19.23"}"
created2018-06-10 02:17:21
last_update2018-06-10 02:17:21
depth1
children0
net_rshares0
last_payout2018-06-17 02:17:21
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length1,712
author_reputation104,981,098,086,561
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
@teammalaysia · 
#### This post has been curated by **TeamMalaysia** Community :- 
To support the growth of TeamMalaysia Follow our upvotes by using **steemauto.com** and follow trail of @myach

Vote **TeamMalaysia** witness bitrocker2020 using this link <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=bitrocker2020&approve=true">vote for witness</a>
properties (22)
post_id52,414,284
authorteammalaysia
permlinkcoders-we-didn-t-forget-about-you-introducing-syntax-highlighting
categoryutopian-io
json_metadata"{"app": "stephard/0.1", "tags": ["teammalaysiadevtest", "teammalaysia"]}"
created2018-06-10 02:18:54
last_update2018-06-10 02:18:54
depth1
children0
net_rshares0
last_payout2018-06-17 02:18:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 SBD
curator_payout_value0.000 SBD
pending_payout_value0.000 SBD
promoted0.000 SBD
body_length358
author_reputation198,507,892,119
root_title"Coders, we didn't forget about you! Introducing syntax highlighting!"
beneficiaries[]
max_accepted_payout1,000,000.000 SBD
percent_steem_dollars10,000
Help/Feedback