style: use short variants of language markers

Author: honzajavorek

sources/academy/glossary/concepts/css_selectors.md

@@ -17,39 +17,39 @@ Some of the most common types of CSS selectors are:
 
 This is used to select elements by their tag name. For example, to select all `<p>` elements, you would use the `p` selector.
 
-```javascript
+```js
 const paragraphs = document.querySelectorAll('p');
 ```
 
 ### Class selector
 
 This is used to select elements by their class attribute. For example, to select all elements with the class of `highlight`, you would use the `.highlight` selector.
 
-```javascript
+```js
 const highlightedElements = document.querySelectorAll('.highlight');
 ```
 
 ### ID selector
 
 This is used to select an element by its `id` attribute. For example, to select an element with the id of `header`, you would use the `#header` selector.
 
-```javascript
+```js
 const header = document.querySelector(`#header`);
 ```
 
 ### Attribute selector
 
 This is used to select elements based on the value of an attribute. For example, to select all elements with the attribute `data-custom` whose value is `yes`, you would use the `[data-custom="yes"]` selector.
 
-```javascript
+```js
 const customElements = document.querySelectorAll('[data-custom="yes"]');
 ```
 
 ### Chaining selectors
 
 You can also chain multiple selectors together to select elements more precisely. For example, to select an element with the class `highlight` that is inside a `<p>` element, you would use the `p.highlight` selector.
 
-```javascript
+```js
 const highlightedParagraph = document.querySelectorAll('p.highlight');
 ```
 

sources/academy/glossary/concepts/html_elements.md

@@ -19,19 +19,19 @@ You can also add **attributes** to an element to provide additional information
 
 In JavaScript, you can use the **DOM** (Document Object Model) to interact with elements on a web page. For example, you can use the [`querySelector()` method](./querying_css_selectors.md) to select an element by its [CSS selector](./css_selectors.md), like this:
 
-```javascript
+```js
 const myElement = document.querySelector('#myId');
 ```
 
 You can also use `getElementById()` method to select an element by its `id`, like this:
 
-```javascript
+```js
 const myElement = document.getElementById('myId');
 ```
 
 You can also use `getElementsByTagName()` method to select all elements of a certain type, like this:
 
-```javascript
+```js
 const myElements = document.getElementsByTagName('p');
 ```
 

sources/academy/glossary/concepts/querying_css_selectors.md

@@ -11,7 +11,7 @@ slug: /concepts/querying-css-selectors
 
 Here's an example of how you can use it:
 
-```javascript
+```js
 const firstButton = document.querySelector('button');
 ```
 
@@ -21,15 +21,15 @@ This will select the first button element on the page and store it in the variab
 
 Here's an example of how you can use it:
 
-```javascript
+```js
 const buttons = document.querySelectorAll('button');
 ```
 
 This will select all button elements on the page and store them in the variable "buttons".
 
 Both functions can be used to access and manipulate the elements in the web page. Here's an example on how you can use it to extract the text of all buttons.
 
-```javascript
+```js
 const buttons = document.querySelectorAll('button');
 const buttonTexts = buttons.forEach((button) => button.textContent);
 ```

sources/academy/platform/deploying_your_code/index.md

@@ -47,7 +47,7 @@ For this section, we'll be turning this example project into an actor:
 <Tabs groupId="main">
 <TabItem value="JavaScript" label="JavaScript">
 
-```javascript
+```js
 // index.js
 const addAllNumbers = (...nums) => nums.reduce((total, curr) => total + curr, 0);
 

sources/academy/platform/deploying_your_code/inputs_outputs.md

@@ -39,7 +39,7 @@ npm install apify
 
 Now, let's import `Actor` from `apify` and use the `Actor.getInput()` function to grab our input.
 
-```javascript
+```js
 // index.js
 import { Actor } from 'apify';
 
@@ -67,7 +67,7 @@ We'll now add an **INPUT.json** file within **storage/key_value_stores/default**
 
 Then we can add our example project code from earlier. It will grab the input and use it to generate a solution which is logged into the console.
 
-```javascript
+```js
 // index.js
 import { Actor } from 'apify';
 
@@ -137,7 +137,7 @@ Similarly to reading input, you can write the actor's output either by using the
 
 In the SDK, we can write to the dataset with the `Actor.pushData()` function. Let's go ahead and write the solution of the `addAllNumbers()` function to the dataset store using this function:
 
-```javascript
+```js
 // index.js
 
 // This is our example project code from earlier.

sources/academy/platform/deploying_your_code/output_schema.md

@@ -145,7 +145,7 @@ Also, if your desired label has the same name as the defined object key, then yo
 
 The matching object for the Zappos Scraper shown in the example above will look something like this:
 
-```javascript
+```js
 const results = {
     url: request.loadedUrl,
     imgUrl: $('#stage button[data-media="image"] img[itemprop="image"]').attr('src'),

sources/academy/platform/expert_scraping_with_apify/solutions/handling_migrations.md

@@ -15,7 +15,7 @@ Let's first head into our **demo-actor** and create a new file named **asinTrack
 
 Here's the skeleton of our class:
 
-```javascript
+```js
 // asinTracker.js
 class ASINTracker {
     constructor() {
@@ -48,7 +48,7 @@ Multiple techniques exist for storing data in memory; however, this is the most
 
 Here is our updated **routes.js** file which is now utilizing this utility class to track the number of offers for each product ASIN:
 
-```javascript
+```js
 // routes.js
 import { createCheerioRouter } from '@crawlee/cheerio';
 import { BASE_URL, OFFERS_URL, labels } from './constants';
@@ -131,7 +131,7 @@ The **persistState** event is automatically fired (by default) every 60 seconds
 
 In order to persist our ASIN tracker object, let's use the `Actor.on` function to listen for the **persistState** event and store it in the key-value store each time it is emitted.
 
-```javascript
+```js
 // asinTracker.js
 import { Actor } from 'apify';
 // We've updated our constants.js file to include the name
@@ -168,7 +168,7 @@ Great! Now our state will be persisted every 60 seconds in the key-value store.
 
 In order to fix this, let's create a method called `initialize` which will be called at the very beginning of the actor's run, and will check the key-value store for a previous state under the key **ASIN-TRACKER**. If a previous state does live there, then it will update the class' `state` variable with the value read from the key-value store:
 
-```javascript
+```js
 // asinTracker.js
 import { Actor } from 'apify';
 import { ASIN_TRACKER } from './constants';
@@ -209,7 +209,7 @@ module.exports = new ASINTracker();
 
 We'll now call this function at the top level of the **main.js** file to ensure it is the first thing that gets called when the actor starts up:
 
-```javascript
+```js
 // main.js
 
 // ...

sources/academy/platform/expert_scraping_with_apify/solutions/integrating_webhooks.md

@@ -21,7 +21,7 @@ Cool! Now, we're ready to get started.
 
 First of all, we should clear out any of the boilerplate code within **main.js** to get a clean slate:
 
-```javascript
+```js
 // main.js
 import { Actor } from 'apify';
 
@@ -34,21 +34,21 @@ await Actor.exit();
 
 We'll be passing the ID of the Amazon actor's default dataset along to the new actor, so we can expect that as an input:
 
-```javascript
+```js
 const { datasetId } = await Actor.getInput();
 const dataset = await Actor.openDataset(datasetId);
 // ...
 ```
 
 Next, we'll grab hold of the dataset's items with the `dataset.getData()` function:
 
-```javascript
+```js
 const { items } = await dataset.getData();
 ```
 
 While several methods can achieve the goal output of this actor, using the [`Array.reduce()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) is the most concise approach
 
-```javascript
+```js
 const filtered = items.reduce((acc, curr) => {
     // Grab the price of the item matching our current
     // item's ASIN in the map. If it doesn't exist, set
@@ -70,13 +70,13 @@ const filtered = items.reduce((acc, curr) => {
 
 The results should be an array, so finally, we can take the map we just created and push an array of all of its values to the actor's default dataset:
 
-```javascript
+```js
 await Actor.pushData(Object.values(filtered));
 ```
 
 Our final code looks like this:
 
-```javascript
+```js
 import { Actor } from 'apify';
 
 await Actor.init();

sources/academy/platform/expert_scraping_with_apify/solutions/rotating_proxies.md

@@ -13,7 +13,7 @@ slug: /expert-scraping-with-apify/solutions/rotating-proxies
 
 If you take a look at our current code for the Amazon scraping actor, you might notice this snippet:
 
-```javascript
+```js
 const proxyConfiguration = await Actor.createProxyConfiguration({
     groups: ['RESIDENTIAL'],
 });
@@ -29,7 +29,7 @@ In order to rotate sessions, we must utilize the [**SessionPool**](https://crawl
 
 Let's go ahead and add a **sessionPoolOptions** key to our crawler's configuration so that we can modify the default settings:
 
-```javascript
+```js
 const crawler = new CheerioCrawler({
     requestList,
     requestQueue,
@@ -52,7 +52,7 @@ const crawler = new CheerioCrawler({
 
 Now, we'll use the **maxUsageCount** key to force each session to be thrown away after 5 uses and **maxErrorScore**** to trash a session once it receives an error.
 
-```javascript
+```js
 const crawler = new CheerioCrawler({
     requestList,
     requestQueue,
@@ -75,7 +75,7 @@ And that's it! We've successfully configured the session pool to match the task'
 
 The final requirement was to only use proxies from the US. Back in our **ProxyConfiguration**, we just need to add the **countryCode** key and set it to **US**:
 
-```javascript
+```js
 const proxyConfiguration = await Actor.createProxyConfiguration({
     groups: ['RESIDENTIAL'],
     countryCode: 'US',

sources/academy/platform/expert_scraping_with_apify/solutions/saving_stats.md

@@ -13,7 +13,7 @@ slug: /expert-scraping-with-apify/solutions/saving-stats
 
 The code in this solution will be similar to what we already did in the **Handling migrations** solution; however, we'll be storing and logging different data. First, let's create a new file called **Stats.js** and write a utility class for storing our run stats:
 
-```javascript
+```js
 import Actor from 'apify';
 
 class Stats {
@@ -51,7 +51,7 @@ module.exports = new Stats();
 
 Cool, very similar to the **AsinTracker** class we wrote earlier. We'll now import **Stats** into our **main.js** file and initialize it along with the ASIN tracker:
 
-```javascript
+```js
 // ...
 import Stats from './Stats.js';
 
@@ -65,7 +65,7 @@ await Stats.initialize();
 
 In order to keep track of errors, we must write a new function within the crawler's configuration called **failedRequestHandler**. Passed into this function is an object containing an **Error** object for the error which occurred and the **Request** object, as well as information about the session and proxy which were used for the request.
 
-```javascript
+```js
 const crawler = new CheerioCrawler({
     proxyConfiguration,
     useSessionPool: true,
@@ -90,7 +90,7 @@ const crawler = new CheerioCrawler({
 
 Now, we'll just increment our **totalSaved** count for every offer added to the dataset.
 
-```javascript
+```js
 router.addHandler(labels.OFFERS, async ({ $, request }) => {
     const { data } = request.userData;
 
@@ -116,7 +116,7 @@ router.addHandler(labels.OFFERS, async ({ $, request }) => {
 
 Still, in the **OFFERS** handler, we need to add a few extra keys to the items which are pushed to the dataset. Luckily, all of the data required by the task is easily accessible in the context object.
 
-```javascript
+```js
 router.addHandler(labels.OFFERS, async ({ $, request }) => {
     const { data } = request.userData;