Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-12857

Syntax highlighting is incorrect for certain JavaScript use cases

XMLWordPrintable

      Issue Summary

      For certain use cases of JavaScript, the syntax highlighting that is used when displaying the source of .js files is incorrect.

      Steps to Reproduce

      1. Have a .js file with the following content 
        public something(callback: callback, options?: ConsumerOptions): Promise<Consumer> {
	console.info(`[${this.constructor.name}] Consumer creating.`);

	this.consumer = Consumer.create({
		...options,
		queueUrl: await this.getUrl(),
		handleMessage: message => {
			if (message.Body){
				message.Body = JSON.parse(message.Body);
			}
		}
	})
}
      2. View the file in source view

      Expected Results

      The syntax is highlighted consistently, something like this way:

      Actual Results

      The syntax is highlighted incorrectly:

      Workaround

      Currently there is no known workaround for this behavior. A workaround will be added here when available

        1. Screenshot 2021-05-14 at 11.43.52.png
          Screenshot 2021-05-14 at 11.43.52.png
          50 kB
        2. Screenshot 2021-05-14 at 11.45.06.png
          Screenshot 2021-05-14 at 11.45.06.png
          53 kB
        3. typescript-mode-highlighting.png
          typescript-mode-highlighting.png
          43 kB
        4. ts-highlighting-in-js.png
          ts-highlighting-in-js.png
          405 kB

          Form Name

            [BSERV-12857] Syntax highlighting is incorrect for certain JavaScript use cases

            John van der Loo (Inactive) added a comment -

            The primary issue that is causing the syntax highlighting problem is that the source is highlighted with the JavaScript mode and the code is TypeScript. If the same content is passed through the TypeScript highlighter (and with a class around it to make it valid code) then we can see that the highlighting is correct:

            There are two resolutions that can be taken here:

            1. Change your file extension to indicate that your file is typescript code, i.e. use .ts
            2. Since TypeScript is a superset of JavaScript, we can also use it to highlight regular JavaScript files. If you so desire, you can change your Bitbucket Server instance to use the TypeScript highlighting mode for regular JavaScript files as well. This can be achieved by adding a line to your bitbucket.properties file that looks like the following (the line for JSX is optional, but if you use TypeScript in JSX somewhere you may want to add it also): 
              syntax.highlighter.application/typescript.extensions=js
syntax.highlighter.text/typescript-jsx.extensions=jsx

            Regards,

            John van der Loo
            Developer, Bitbucket Server

            John van der Loo (Inactive) added a comment - The primary issue that is causing the syntax highlighting problem is that the source is highlighted with the JavaScript mode and the code is TypeScript. If the same content is passed through the TypeScript highlighter (and with a class around it to make it valid code) then we can see that the highlighting is correct: There are two resolutions that can be taken here: Change your file extension to indicate that your file is typescript code, i.e. use .ts Since TypeScript is a superset of JavaScript, we can also use it to highlight regular JavaScript files. If you so desire, you can change your Bitbucket Server instance to use the TypeScript highlighting mode for regular JavaScript files as well. This can be achieved by adding a line to your bitbucket.properties file that looks like the following (the line for JSX is optional, but if you use TypeScript in JSX somewhere you may want to add it also): syntax.highlighter.application/typescript.extensions=js syntax.highlighter.text/typescript-jsx.extensions=jsx Regards, John van der Loo Developer, Bitbucket Server

              Unassigned Unassigned
              cglockner Christian Glockner
              Affected customers:
              0 This affects my team
              Watchers:
              1 Start watching this issue

                Created:
                Updated:
                Resolved: