Improve syntax highlight for Flow syntax (#18645)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

website/blog/2017-05-03-1.3.0.md

@@ -50,7 +50,7 @@ When I started working on prettier, I had a hunch that people were hungry for to
 The `--trailing-comma=all` option is supposed to add trailing commas everywhere possible, but as an oversight we forgot to do it for flow generics.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type Errors = Immutable.Map<
   Ahohohhohohohohohohohohohohooh,
@@ -69,7 +69,7 @@ type Errors = Immutable.Map<
 The phase after printing things correctly is to tweak the output to make it closer to the way people write code in practice. Inlining optional flow types is a small thing that makes a difference.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type Cursor = Promise<
   ?{
@@ -90,7 +90,7 @@ type Cursor = Promise<?{
 We can always find more places to add breaks when things don't fit 80 columns. This time it's around declaring a type as a constant string.
 
 <!-- prettier-ignore -->
-```js
+```flow
 // Before
 export type AdamPlacementValidationSingleErrorKey = 'SOME_FANCY_TARGETS.GLOBAL_TARGET';
 
@@ -104,7 +104,7 @@ export type AdamPlacementValidationSingleErrorKey =
 Another example of small thing where we can improve the display of flow code. For function default arguments we put a space around `=` but didn't around flow generics.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 class PolyDefault<T=string> {}
 
@@ -117,7 +117,7 @@ class PolyDefault<T = string> {}
 I'm trying to figure out something to write here, but ... it just looks weird!
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 const selectorByPath:
   Path
@@ -140,7 +140,7 @@ const selectorByPath: Path => SomethingSelector<
 We were a bit too lenient around parenthesis for optional flow types. In one case in the entire Facebook codebase, it generated code with different semantics. As part of this fix, we hardened the list of types that can be written without parenthesis.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type X = ?(number, number) => number => void;
 
@@ -153,7 +153,7 @@ type X = (?(number, number) => number) => void;
 It is a parse error to add a trailing comma without parenthesis for arguments of arrow function types. We found one case in Facebook codebase when this happened, it's a very rare occurrence.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type IdeConnectionFactory =
   child_process$ChildProcess,
@@ -170,7 +170,7 @@ type IdeConnectionFactory =
 This one is an example where the way the AST is structured is not our favor. Instead of having a list of elements inside of a type, the AST is structured in a way where normal keys and array keys each have their own group. In order to restore the initial order, we're now reading from the original source :(
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type Foo = {
   [key: string]: void,

website/blog/2017-08-29-1.6.0.md

@@ -422,7 +422,7 @@ data[key]('foo')
 The flow team introduced two very exciting features under a new syntax. We now support them in prettier. I've personally been waiting for [opaque types](https://medium.com/flow-type/hiding-implementation-details-with-flows-new-opaque-type-aliases-feature-40e188c2a3f9) for a veerrryyyy long time!
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 Syntax error
 
@@ -436,7 +436,7 @@ export type * from "module";
 We've been doing this on JavaScript objects since the early days of prettier but forgot to apply the same thing to Flow and TypeScript types.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type A = {
   "string": "A";
@@ -453,7 +453,7 @@ type A = {
 Oopsy, we were dropping the generic in this very specific case.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 type myFunction = A => B;
 
@@ -466,7 +466,7 @@ type myFunction = <T>(A) => B;
 Parenthesis... someday we'll get all of them fixed :)
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 const actionArray: () => void[] = [];
 

website/blog/2017-11-07-1.8.0.md

@@ -430,7 +430,7 @@ find('.org-lclp-edit-copy-url-banner__link')[0]
 This was a minor alignment bug in intersection types, and has now been fixed.
 
 <!-- prettier-ignore -->
-```js
+```tsx
 // Before
 type intersectionTest = {
   propA: X

website/blog/2017-12-05-1.9.0.md

@@ -191,7 +191,7 @@ It won't break empty type parameters (`foo: Type<>`) anymore.
 We were accidentally dropping flow mixins, this has been fixed, but only for the `babylon` parser.
 
 <!-- prettier-ignore -->
-```js
+```flow
 // Before
 class Foo extends Bar {}
 

website/blog/2018-01-10-1.10.0.md

@@ -120,15 +120,15 @@ var c = 0xAE_FE_2F;
 
 Flow [type annotation comments](https://flow.org/en/docs/types/comments/#toc-comment-type-annotation) are a nice way to get type checking without having to transpile your files. Before this release, Prettier, using the flow parser, would not print the type annotation as comments, making it impossible to use that feature. Now, Prettier will correctly detect if the type annotation was a comment and print accordingly for `/*: ... */` type comments. Work is in progress for `/*:: ... */` comments.
 
-```ts
+```flow
 // Input
-let foo /*: string */ = "a";
+let foo: string = "a";
 
 // Before
 let foo: string = "a";
 
 // After
-let foo /*: string */ = "a";
+let foo: string = "a";
 ```
 
 #### Print comment after arrow function params ([#3444]) by [@duailibe]
@@ -136,7 +136,7 @@ let foo /*: string */ = "a";
 If you are using the babylon parser, there are different kind of issues with flow comments where comments are moved around. One of them was fixed during this release. We're now getting closer to be able to support that feature.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // Before
 const run = (cmd /*: string */ /*: Promise<void> */) => {};
 
@@ -149,7 +149,7 @@ const run = (cmd /*: string */) /*: Promise<void> */ => {};
 In the [last release](https://prettier.io/blog/2017/12/05/1.9.0.html) we added a new `arrowParens` option. One place were it was overlooked is in flow function type annotations. Now when `arrowParens` is set to `always` we will put parenthesis around single arguments.
 
 <!-- prettier-ignore -->
-```ts
+```flow
 // --arrow-parens always
 
 // Before

website/blog/2018-05-27-1.13.0.md

@@ -271,7 +271,7 @@ do {
 In versions 1.12 and earlier, Prettier would incorrectly remove `mixins` and `implements` from flow libdef classes, which would change the meaning of the code. This has been fixed in 1.13.
 
 <!-- prettier-ignore -->
-```js
+```flow
 // Input
 declare class A implements B {}
 declare class C mixins D {}
@@ -296,21 +296,21 @@ New features added to Flow are now supported by Prettier:
 - inline interfaces
 
   <!-- prettier-ignore -->
-  ```ts
+  ```flow
   type A = interface { p: string};
   ```
 
 - explicit type arguments
 
   <!-- prettier-ignore -->
-  ```ts
+  ```flow
   fnCall<string>("name");
   ```
 
 - proto modifier syntax
 
   <!-- prettier-ignore -->
-  ```ts
+  ```flow
   declare class A { proto: T }
   ```
 

website/blog/2018-11-07-1.15.0.md

@@ -433,7 +433,7 @@ This syntax is now supported in Prettier 1.15.
 [inexact]: https://medium.com/flow-type/on-the-roadmap-exact-objects-by-default-16b72933c5cf
 
 <!-- prettier-ignore -->
-```ts
+```flow
 type T = {
   a: number,
   ...

website/blog/2019-01-20-1.16.0.md

@@ -113,7 +113,7 @@ To address this issue, we added the `babel-flow` parser option, which uses Babel
 but prefers Flow syntax when ambiguities arise.
 
 <!-- prettier-ignore -->
-```js
+```flow
 // Input
 const Theme = React.createContext<"light" | "dark">("light");
 

website/blog/2019-11-09-1.19.0.md

@@ -557,10 +557,11 @@ const foo = [abc, def, ghi, jkl, mno, pqr, stu, vwx, yz] as (
 
 #### Add support for enums ([#6833] by [@gkz])
 
-```js
+```flow
 // Input
 enum E of string {
-  A = "a", B = "b"
+  A = "a",
+  B = "b",
 }
 
 // Prettier 1.19

website/blog/2020-03-21-2.0.0.md

@@ -791,7 +791,7 @@ const a: T</* comment */> = 1;
 A new AST node type was introduced in flow@0.114.0, now it's recognized.
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 const x: symbol = Symbol();
 
@@ -805,7 +805,7 @@ const x: symbol = Symbol();
 #### Add support for decorators ([#7482](https://github.com/prettier/prettier/pull/7482) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 /* @flow */
 @decorator4
@@ -837,7 +837,7 @@ class Foo {
 #### Fix private class field declarations ([#7484](https://github.com/prettier/prettier/pull/7484) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```js
+```flow
 // Input
 class Foo {
   #privateProp: number;

website/blog/2020-08-24-2.1.0.md

@@ -874,7 +874,7 @@ let f: <A>(((?A) => B)) => B;
 Do not add a trailing semicolon if default exporting a Flow Enum.
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 export default enum B {}
 

website/blog/2020-11-20-2.2.0.md

@@ -451,7 +451,7 @@ type a = {
 In practice, this means that as long as your Flow files have the pragma, it's safe to use the `.js` extension for them. Prettier will correctly parse and print them without any additional configuration. Previously, the pragma was recognized by the parser, but there existed minor correctness issues with the printer. E.g. it's not safe to unquote number keys in Flow.
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input (with --parser babel)
 // @flow
 f<T>({ "2": 2 })
@@ -470,7 +470,7 @@ f<T>({ "2": 2 });
 Previously, was not supported. Now, the following is formatted:
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 enum E {
   A,
@@ -491,7 +491,7 @@ enum E {
 #### `this` parameter annotations ([#9457](https://github.com/prettier/prettier/pull/9457) by [@dsainati1](https://github.com/dsainati1), [#9489](https://github.com/prettier/prettier/pull/9489) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 function f(this: string, a: number) {
 }
@@ -515,7 +515,7 @@ type T = (this: boolean, a: number) => boolean;
 Add support for `BigIntLiteralTypeAnnotation` and `BigIntTypeAnnotation` in Flow.
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 const foo: bigint = 1n;
 const bar: baz<1n> = 1n;
@@ -532,7 +532,7 @@ const bar: baz<1n> = 1n;
 #### Treat more simple types as non-breaking in generic type annotations ([#9543](https://github.com/prettier/prettier/pull/9543) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 const foo1: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<symbol> = a
 const foo2: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo<"STRING"> = a;
@@ -558,7 +558,7 @@ const foo3: Fooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo
 #### Fix missing parentheses around `prettier-ignore`d type assertions ([#9553](https://github.com/prettier/prettier/pull/9553) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 transform(
   // prettier-ignore
@@ -581,7 +581,7 @@ transform(
 #### Improve comment types detection ([#9563](https://github.com/prettier/prettier/pull/9563) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 foo/*::<bar>*/(baz);
 class Foo {

website/blog/2021-05-09-2.3.0.md

@@ -1064,7 +1064,7 @@ interface Foo {
 #### Fix missing semicolon in `declare export * from …` ([#9767](https://github.com/prettier/prettier/pull/9767) by [@fisker](https://github.com/fisker))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 declare export * from "ES6_ExportAllFrom_Source2";
 
@@ -1079,7 +1079,7 @@ declare export * from "ES6_ExportAllFrom_Source2";
 
 `this` type annotation is supported since [Babel 7.13](https://babeljs.io/blog/2021/02/22/7.13.0#new-flow-features-12193httpsgithubcombabelbabelpull12193-12234httpsgithubcombabelbabelpull12234).
 
-```js
+```flow
 // Input
 var foo: (this: boolean) => void;
 
@@ -1088,7 +1088,6 @@ SyntaxError: Unexpected token, expected ")" (1:15)
 
 // Prettier 2.3
 var foo: (this: boolean) => void;
-
 ```
 
 #### Fix range formatting issues ([#10505](https://github.com/prettier/prettier/pull/10505) by [@thorn0](https://github.com/thorn0))

website/blog/2021-09-09-2.4.0.md

@@ -216,7 +216,7 @@ type Example = {
 #### Always put a semicolon before Flow variance sigils ([#11398](https://github.com/prettier/prettier/pull/11398) by [@noppa](https://github.com/noppa))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 class A {
   +one = function() {};

website/blog/2022-03-16-2.6.0.md

@@ -520,7 +520,7 @@ type Foo = [
 #### Fix Flow's class declaration's `static` indexer formatting ([#12009](https://github.com/prettier/prettier/pull/12009) by [@gkz](https://github.com/gkz))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 declare class A {
   static [string]: boolean;

website/blog/2023-07-05-3.0.0.md

@@ -179,7 +179,7 @@ For historical reasons, Prettier used to recognize Flow syntax in JS files when
 Being a kind of preprocessor, [Flow comments](https://flow.org/blog/2015/02/20/Flow-Comments/) AKA [comment types](https://flow.org/en/docs/types/comments/) are processed on the token level and can't be represented in an AST in the general case. Flow builds the AST as if these special comment tokens didn't exist. Example:
 
 <!-- prettier-ignore -->
-```js
+```flow
 /*:: if */ (x) + y;
 ```
 
@@ -1391,7 +1391,7 @@ type Foo = {
 This behavior has been unified with how TypeScript is formatted.
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 declare function bla (props: { a: boolean, b: string, c: number }): Promise<Array<foo>>
 
@@ -1411,7 +1411,7 @@ declare function bla(props: {
 #### Support conditional type and infer type ([#14573](https://github.com/prettier/prettier/pull/14573) by [@SamChou19815](https://github.com/SamChou19815))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 type TestReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : any;
 
@@ -1428,9 +1428,9 @@ type TestReturnType<T extends (...args: any[]) => any> = T extends (
 
 #### Support Mapped Types and keyof ([#14619](https://github.com/prettier/prettier/pull/14619) by [@jbrown215](https://github.com/jbrown215))
 
-```jsx
+```flow
 // Input
-type Mapped = {[key in keyof O]:number};
+type Mapped = { [key in keyof O]: number };
 
 // Prettier 2.8
 // Does not parse
@@ -1442,7 +1442,7 @@ type Mapped = { [key in keyof O]: number };
 #### Support type guards ([#14767](https://github.com/prettier/prettier/pull/14767) by [@panagosg7](https://github.com/panagosg7))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 function isString (x: mixed): x is string { return typeof x === "string"; }
 

website/blog/2023-11-13-3.1.0.md

@@ -431,7 +431,7 @@ type satisfies never;
 #### Support `as` and `satisfies` expressions for Flow ([#15130](https://github.com/prettier/prettier/pull/15130) by [@gkz](https://github.com/gkz))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 const x = y as T;
 

website/blog/2024-06-01-3.3.0.md

@@ -16,7 +16,7 @@ If you appreciate Prettier and would like to support our work, please consider s
 #### `declare namespace` printing support ([#16066](https://github.com/prettier/prettier/pull/16066) by [@SamChou19815](https://github.com/SamChou19815))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 declare namespace foo {
   declare var bar: string;
@@ -34,7 +34,7 @@ declare namespace foo {
 #### Component syntax printing support ([#16191](https://github.com/prettier/prettier/pull/16191) by [@SamChou19815](https://github.com/SamChou19815))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 component MyComponent(a: string, b: number) renders SomeComponent {
   return <OtherComponent />;
@@ -60,7 +60,7 @@ hook useMyHook(a: string) {
 Adds support for big int [Flow Enums](https://flow.org/en/docs/enums/).
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 enum E {
   A = 0n,

website/blog/2025-02-09-3.5.0.md

@@ -169,7 +169,7 @@ br_triggers_expression_break = (
 #### Support `const` type parameters in Flow ([#16947](https://github.com/prettier/prettier/pull/16947) by [@gkz](https://github.com/gkz))
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 function f<const T>(): void {}
 
 // Prettier 3.4

website/blog/2025-11-27-3.7.0.md

@@ -1165,7 +1165,7 @@ type SuperLongTypeNameLoremIpsumLoremIpsumBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBlaBla =
 #### Add basic support for "match" syntax ([#17681](https://github.com/prettier/prettier/pull/17681) by [@fisker](https://github.com/fisker)) {#change-17681}
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 const e = match (a) {
   1 => true,
@@ -1192,7 +1192,7 @@ const e = match (a) {
 #### Add support for opaque type with lower and upper bound ([#17792](https://github.com/prettier/prettier/pull/17792) by [@SamChou19815](https://github.com/SamChou19815)) {#change-17792}
 
 <!-- prettier-ignore -->
-```jsx
+```flow
 // Input
 opaque type Counter super empty extends Box<T> = Container<T>;
 opaque type Counter super Box<T> = Container<T>;

website/docusaurus.config.js

@@ -268,6 +268,7 @@ const config = {
           "vim",
           "scss",
           "less",
+          "flow",
         ],
         theme: prismThemes.github,
         darkTheme: prismThemes.dracula,