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:
committed by
Facebook GitHub Bot
parent
e4a814502a
commit
40e6cdebb1
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user