It would be nice to be able to have code syntax highlighting in blog posts like how github markdown works. Github uses highlight.js

added scoped labels

I, and other developers want this site wide, but I think blogs would be an excellent starting point.

added to epic &34

mentioned in epic &34

changed title from Code syntax highlighting for blogs to Code syntax highlighting for blogs

front#560 (closed)

mentioned in issue front#560 (closed)

@ottman Is this issue eligible for community/bounty? see engine#1084 also

I've no idea about the bounty, unfortunately. @ottman will be able to answer better,

Just a note for when this is made, ideally we want to be able to integrate the same logic around the site ideally in group chats, so if we can make it modular that would be perfect.

added labels

Added, but before we start anything we need to setup a call with Mark. I'll work on getting you some possible times.

Proposal:

• Add a module for code syntax highlighting that can be used in blogs, posts, comments, groups, etc. I propose using HighlightJS with the default language pack.

Bounty added on https://gitcoin.co/issue/Minds/minds/152/3892

changed title from Code syntax highlighting for to Code syntax highlighting for

@jim-toth - just accepted on Gitcoin! The key thing with this task is that the security is locked down.. we con't want any scripts accidentally executing in the browsers. Also lets not forget about mobile in the interim.

Thanks! I will definitely keep security in mind and I've begun to think about mobile as I was investigating the data saver issue. I will provide an update for Monday.

mentioned in merge request front!735

@benhayward.ben Bill asked me to touch base with you about the Blogs rework as I'm currently working on this issue. I've written a code-highlight module in front!735 which contains a code-highlight pipe and a code-highlight directive. I've been working on a medium-editor plugin but if you're moving away from that I'd like to see how code syntax highlighting would fit in. Let me know if you have time to chat, thanks!

Hey, the system for new blogs currently is just a PoC but will be getting finalized and added into the site soon. front#2333

MR: front!733 (diffs)

Any questions happy to answer them though

Thanks! I guess let me explain a little about my solution to see what would conflict with the new blogs PoC:

Posts (Activity) & Comments:

For posts and comments I've written a pipe to replace code blocks with wrapped and highlighted HTML using the HighlightJS library. For example:

Would be returned from the code highlighting pipe wrapped like this:

<div class="m-code-highlight">
  <pre>
    <code class="language-javascript">
      <!-- Hightlighted code syntax HTML -->
    </code>
  </pre>
</div>

Blogs:

I've written a medium-editor plugin that adds a code highlight button to the toolbar to wrap highlighted text. The plugin has a form which provides the user with a dropdown to either auto-detect language or choose a specific one from the list of languages HighlightJS supports. The plugin does not highlight code in the editor as this happens client-side on view. The reason for this is to avoid allowing <pre><code> during XSS sanitation on the back-end. The HTML in the blog post when editing and saving would look like this:

<div class="m-code-highlight" data-language="javascript">
  <!-- User's code text -->
</div>

I decided an attribute directive would work best for highlighting code on blog view which would search on the m-code-highlight class and replace the content wrapped similarly as above. The data-language attribute provides a language hint to the directive. The directive output would look like this:

<div class="m-code-highlight">
  <pre>
    <code class="language-javascript">
      <!-- Hightlighted code syntax HTML -->
    </code>
  </pre>
</div>

I'll take a look at the new blog PoC and see how I can mirror the plugin functionality that I've written and modify the blog-view code highlight directive to be compatible.

Please let me know your thoughts on this implementation! The code highlight pipe, directive, and plugin should all be working in my WIP MR if you'd like to take a look. There's still a bit of refactoring, functionality fixes, and styling to get to but it should give you an idea of how it all works.

As a whole feature, it looks really nice. As far as blogs goes, this is going to take some thought and coordination on our end.

The plan for CKEditor is to roll-out a custom build. In the MR above, I've just used BalloonEditor for a PoC, but we need to modify it for release so that we can have alignment options. Given this, it is possible we could add plugins. The CKEditor5 docs are very nice, but plugin creation for it is not something that I'm familiar with myself unfortunately so I cannot guide on the specifics of how to make one.

Tagging @brianhatchet so that he can help co-ordinate this with our schedules.

Progress Update:

• Spec tests finalized for code-highlight pipe, directive, and service.

TODO:

• Mobile posts and comments
• Investigate new blog PoC branch