Giter VIP home page Giter VIP logo

highlightjs-structured-text's Introduction

ST Language Support

Greenkeeper badge

This repository provides syntax highlighting for Highlight.js for Structured Text. ST is one of the 6 languages of IEC 61131-3 standard developed in 1998 for developing PLC programs.

We want to provide ST syntax highlights in VS Code Markdown editor and Markdown preview. And other cases when tutorials are published in the web.

Install

npm i highlightjs-structured-text --save

Usage

Browser

Include the highlight.js script package in your webpage or node app, load this module and register it with hljs. Follow instructions at highlightjs to learn how to include the library and CSS.

If you're not using a build system and just want to embed this in your webpage:

<script type="text/javascript" src="/path/to/highlight.pack.js"></script>
<script type="text/javascript" src="/path/to/highlightjs-structured-text/dist/iecst.min.js"></script>
<script type="text/javascript">
    hljs.highlightAll();
</script>

Nodejs

If you're using webpack / rollup / browserify / node:

var hljs = require('highlightjs');
var hljsDefineIECST = require('highlightjs-structured-text');

hljs.registerLanguage('iecst', hljsDefineIECST);
hljs.initHighlightingOnLoad();

Mark the code you want to highlight with the iecst class:

<pre><code class="iecst">...</code></pre>

Programmatically

Or use JavaScript to programmatically highlight text string:

hljs.registerLanguage('iecst', hljsDefineIECST);
var highlighted = hljs.highlightAuto(text_string, ["iecst"]);

React

import React, {Component} from 'react'
import 'highlight.js/scss/darcula.scss' # your favourite theme
import cypher from './iecst'
import hljs from 'highlight.js'
hljs.registerLanguage('iecst', iecst);

class Highlighter extends Component
{
  constructor(props)
  {
    super(props);
    hljs.initHighlightingOnLoad();
  }

  render()
  {
    let {children} = this.props;
    return
    {
      <pre ref={(node) => this.node = node}>
        <code className="iecst">
          {children}
        </code>
      </pre>
    }
  }
}

export default Highlighter;

Marp

To use in marp

First create file engine.js

const { Marp } = require('@marp-team/marp-core')
const hljs = require('highlight.js')
const iecst = require('highlightjs-structured-text')
hljs.registerLanguage("iecst", iecst)

module.exports = (opts) => {
  const marp = new Marp(opts)

  marp.highlighter = (code, lang) => {
    if (lang) {
      return hljs.getLanguage(lang)
        ? hljs.highlight(lang, code, true).value
        : ''
    }
    return hljs.highlightAuto(code).value
  }

  return marp
}

And now when you build with CLI add engine parameter,

npx marp --engine ./enjine.js ./slides.md

highlightjs-structured-text's People

Contributors

engineerjoe440 avatar greenkeeper[bot] avatar joshgoebel avatar marcoscaceres avatar serhioromano avatar tali avatar yhatt avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

highlightjs-structured-text's Issues

Invite to communicate for @joshgoebel

@joshgoebel

Thank you for response first of all. But i am completely lost how to add my own language. In extra/3RD_PARTY_QUICK_START.md file is a very controversial and convoluted information.

  1. It shows as example separate repositories like mine but suggest to checkout HLJS repo and add folder to extra folder
  2. It suggests adding folder extra/iecst in my case but later when run build it says it will generate extra/highlightjs-iecst/dist/iecst.min.js file. So, it is a different folder name.
  3. In instruction is say create file in src/languages but why then create separate repository?

Problem exporting to pdf.

Hi there!

I can't find any VSCode markdown extension which is able to export this syntax highlighting to pdf, do you have any tips?

I get the highlighting in the code editor, and with marp I get one slide, but I need it for a regular pdf document and there I always only get all black text.

Install in Existing Highlight.js?

Definitely a noob here...

How should I go about "installing" this in Highlight.js? I'd like to use it with marp for some presentations I'd like to automate putting together. I've found that there's a highlight.js folder underneath my marp installation. Can I just throw some of these files in there and kick a few things to get highlight.js to recognize the new syntax?
image

Thanks!!!

Making it work without NodeJS

Hi there,

correct me if I'm wrong, but it seems to me that this language can only be installed when using HighlightJS with NodeJS :-( Is there some specific reason for this?

I looked into this a bit more and here is a Gist containing a version that works with the vanilla JS version of HighlightJS: https://gist.github.com/philippn/0c45ef5eab20d90dffd9612f6d295c1d

Maybe you will find this useful or consider this for integration.

Thanks and kind regards,
Philipp

Contribute to the thought process for 3rd party language packaging if you'd like

Contribute to the thought process for 3rd party language packaging if you'd like

As a maintainer of a Highlight.js language grammar you might be interested in the discussion of an official packaging format. I just created an issue to track the discussion and I've been working on this along with the new build system.

highlightjs/highlight.js#2328

Sorry for the spam, but I couldn't think of an easier way to ping the people who might be most interested in weighing in on the subject. Feel free to simply close this issue or leave it open (whatever works best for you!).

An in-range update of highlight.js is breaking the build 🚨


☝️ Important announcement: Greenkeeper will be saying goodbye πŸ‘‹ and passing the torch to Snyk on June 3rd, 2020! Find out how to migrate to Snyk and more at greenkeeper.io


The devDependency highlight.js was updated from 10.0.0 to 10.0.1.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

highlight.js is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

Release Notes for 10.0.1

Fixes: sublanguage with no rule matches causes text to disappear in final output. (#2506).

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.


Your Greenkeeper Bot 🌴

This is very frustrating

@joshgoebel I was first who implemented your new model for files, and I never got into the list of languages. Even to this day anyone who install new version of HLJS, do not have this language there. On a demo site it is also not there.

It is so hard to promote highlights for not as much popular languages and I first added my language into main HLJS library to list of all other languages, but you asked me to create separate repo, and I do not have any advantages because of that. It looks like I am punished for doing what you want.

And I have already raised this subject.

What can we do that when people install or update HLJS my ST language is there?

Highlight automatically are not there

@marcoscaceres please look at this topic.

microsoft/vscode-markdown-tm-grammar#79

They say that VS Code uses HighlightJS to Highlight markdown previews. Why it does not highlight this language? Can you ship next HLJS version with support of this language out of the box.

The whole purpose of my integration was that with time as developers update HLJS version in their applications on different blogs platforms, highlight of ST will appear. But it is for years already and situation does not change. Please tell me what to do to make it part of HLJS install through NPM or Bower.

Please push new release to NPM

Hi there,

first of all, thanks for your great work. I have seen, that you have updated the dependencies two months ago in order to use the new NPM highlight.js instead of the deprecated one.

However, the release currently being distributed via NPM still yields the old dependency and thus brings up this warning:

npm WARN deprecated [email protected]: Use the 'highlight.js' package instead https://npm.im/highlight.js

Could you please release a new version to fix this?

Thanks in advance and kind regards,
Philipp

Add Conversion Function Highlighting

I realized that there was no existing support for the standard IEC 61131-3 conversion functions (BYTE_TO_BOOL, etc) so I crafted some RegEx matches that add this support. I'll open a pull request (#13) for this, but for clarity, here's the main portion that I'm suggesting:
image

I would love to hear if you have any other thoughts regarding this suggestion, or if you feel that anything should be changed.

With this new portion, syntax highlighting appears for these conversion functions similar to what might be found below:
image

Thank you!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.