improve docs code blocks highlighting (#2049)

Summary:
This PR adds missing Objective-C entry to the Docusaurus config, fixes Objective-C code blocks label and adds or replaces several code block labels to improve the currently highlighted blocks.

Prism in Docusaurus by default also includes syntax highlight for `jsx` and `tsx`, which improves the nodes and props highlight, so I have used those syntaxes in few places too.

I have also fixed one typo that I have spotted and my IDE made a cleanup of whitespaces in edited files.

## Changelog

* [website] improve docs code blocks highlighting

Pull Request resolved: https://github.com/facebook/flipper/pull/2049

Test Plan:
The changes have been tested running Flipper website on `localhost`.

## Preview

<img width="650" alt="Screenshot 2021-03-12 150934" src="https://user-images.githubusercontent.com/719641/110951135-fff20d00-8344-11eb-96db-1bdc82c8d5ea.png">

<img width="649" alt="Screenshot 2021-03-12 151022" src="https://user-images.githubusercontent.com/719641/110951268-2ca62480-8345-11eb-9d3b-1a48f1267776.png">

Reviewed By: priteshrnandgaonkar

Differential Revision: D27336599

Pulled By: passy

fbshipit-source-id: c2dfb3d8cad4675da0f5e1270cada1e56a0175c0
This commit is contained in:
Bartosz Kaszubowski
2021-03-29 02:45:09 -07:00
committed by Facebook GitHub Bot
parent e4a814502a
commit 40e6cdebb1
18 changed files with 83 additions and 83 deletions

View File

@@ -25,7 +25,7 @@ can sort, filter and select items for more detailed information.
We start by defining what our table rows look like as types:
```javascript
```js
type Id = number;
type Row = {
@@ -43,7 +43,7 @@ that we know when something new was added to the table. We will use the
Next, we define which columns to show and how to display them:
```javascript
```js
const columns = {
title: {
value: 'Title',
@@ -73,7 +73,7 @@ table. You could, for instance, show images that you referenced.
For this tutorial, however, we will just show the full object by
using our `ManagedDataInspector` UI component:
```javascript
```jsx
import {Panel, ManagedDataInspector} from 'flipper';
function renderSidebar(row: Row) {
@@ -96,7 +96,7 @@ also render individual rows in our table but instead of a React
component, we provide a description of the data based
on the column keys we have set up before.
```javascript
```jsx
function buildRow(row: Row): TableBodyRow {
return {
columns: {
@@ -130,7 +130,7 @@ any row and copy the content to their clipboard.
Now that we've build all the individual pieces, we
just need to hook it all up using `createTablePlugin`:
```javascript
```js
export default createTablePlugin<Row>({
method: 'newRow',
columns,