diff --git a/docs/site/CMakeLists.txt b/docs/site/CMakeLists.txt
index ec0274f71adc30d58cd288977e2db22b176d3269..76a2e398c9fdd564715a511abea8ee40e004f5cb 100644
--- a/docs/site/CMakeLists.txt
+++ b/docs/site/CMakeLists.txt
@@ -3,6 +3,7 @@ configure_files(${CMAKE_CURRENT_SOURCE_DIR}/blog ${CMAKE_CURRENT_BINARY_DIR}/blo
 configure_files(${CMAKE_CURRENT_SOURCE_DIR}/docs ${CMAKE_CURRENT_BINARY_DIR}/docs)
 file(COPY ${CMAKE_CURRENT_SOURCE_DIR}/static DESTINATION ${CMAKE_CURRENT_BINARY_DIR})
 file(COPY ${CMAKE_CURRENT_SOURCE_DIR}/src DESTINATION ${CMAKE_CURRENT_BINARY_DIR})
+file(COPY ${CMAKE_CURRENT_SOURCE_DIR}/plugins DESTINATION ${CMAKE_CURRENT_BINARY_DIR})
 
 add_custom_target(
         site ALL
diff --git a/docs/site/docs/getting-started.mdx b/docs/site/docs/getting-started.mdx
index 7fc0273e7b95d812ba1e33f4c8db3ce9d3524646..a21b96f37d543b55c8ab37d4fa8b7e4b34b3f117 100644
--- a/docs/site/docs/getting-started.mdx
+++ b/docs/site/docs/getting-started.mdx
@@ -32,14 +32,14 @@ unix socket or a tcp port for communications)
 }>
 <TabItem value="unix">
 
-```shell link="getting_started/start_asapo_socket.sh" title="start_asapo_socket.sh"
+```shell content="getting_started/start_asapo_socket.sh" title="start_asapo_socket.sh"
 ```
 
 </TabItem>
 
 <TabItem value="tcp">
 
-```shell link="getting_started/start_asapo_tcp.sh" title="start_asapo_tcp.sh"
+```shell content="getting_started/start_asapo_tcp.sh" title="start_asapo_tcp.sh"
 ```
 
 </TabItem>
@@ -84,19 +84,19 @@ Now you can install Python packages or C++ libraries for ASAPO Producer and Cons
 }>
 <TabItem value="python-pip">
 
-```shell link="getting_started/install_python_clients_pip.sh"
+```shell content="getting_started/install_python_clients_pip.sh" snippetTag="#snippet1"
 ```
 
 </TabItem>
 <TabItem value="python-packages">
 
-```shell link="getting_started/install_python_clients_pkg.sh"
+```shell content="getting_started/install_python_clients_pkg.sh"
 ```
 
 </TabItem>
 <TabItem value="cpp">
 
-```shell link="getting_started/install_cpp_clients.sh"
+```shell content="getting_started/install_cpp_clients.sh"
 ```
 
 </TabItem>
@@ -107,8 +107,8 @@ Run the development server in the newly created `my-website` folder:
 
 Open `docs/getting-started.md` and edit some lines. The site reloads automatically and display your changes.
 
-## Step 3: Produce a message {#step-34}
+## Step 3: Produce a message {#step-3}
 
-## Step 4: Consume a message {#step-34}
+## Step 4: Consume a message {#step-4}
 
 ## Step 5: Clean-up
diff --git a/docs/site/docusaurus.config.js b/docs/site/docusaurus.config.js
index b77aafe0584cb9974e9b316440934664138a875f..735c7727e2614764da8bbd594aca21e6755c3ff4 100644
--- a/docs/site/docusaurus.config.js
+++ b/docs/site/docusaurus.config.js
@@ -1,4 +1,8 @@
 /** @type {import('@docusaurus/types').DocusaurusConfig} */
+
+const path = require('path');
+
+
 module.exports = {
   title: 'ASAP::O',
   tagline: 'High performance distributed streaming platform',
@@ -12,6 +16,7 @@ module.exports = {
    customFields: {
      version: '@ASAPO_VERSION@',
    },
+  plugins: [path.resolve(__dirname, 'plugins/webpackconf/src/index.js')],
   themeConfig: {
     navbar: {
       logo: {
diff --git a/docs/site/package-lock.json b/docs/site/package-lock.json
index a617e4023aaabc2cd9cdbc6b2a720bc6501dc1bd..da6cdd14667e9af6bab6cb5b525d058f18e26b70 100644
--- a/docs/site/package-lock.json
+++ b/docs/site/package-lock.json
@@ -12829,6 +12829,27 @@
         "unpipe": "1.0.0"
       }
     },
+    "raw-loader": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/raw-loader/-/raw-loader-4.0.2.tgz",
+      "integrity": "sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==",
+      "requires": {
+        "loader-utils": "^2.0.0",
+        "schema-utils": "^3.0.0"
+      },
+      "dependencies": {
+        "schema-utils": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
+          "integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
+          "requires": {
+            "@types/json-schema": "^7.0.6",
+            "ajv": "^6.12.5",
+            "ajv-keywords": "^3.5.2"
+          }
+        }
+      }
+    },
     "rc": {
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
diff --git a/docs/site/package.json b/docs/site/package.json
index ea500753e9bc3e4989fc65c2fc622c36f195c5f2..ecacf1b7372a75882fddb5825d8ede8ad1abcc1a 100644
--- a/docs/site/package.json
+++ b/docs/site/package.json
@@ -18,6 +18,7 @@
     "@docusaurus/preset-classic": "2.0.0-alpha.72",
     "@mdx-js/react": "^1.6.21",
     "clsx": "^1.1.1",
+    "raw-loader": "^4.0.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "text": "github:requirejs/text"
diff --git a/docs/site/plugins/webpackconf/src/index.js b/docs/site/plugins/webpackconf/src/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..2e45f77bc3130441ac0cc9e7f5dce36ffd435655
--- /dev/null
+++ b/docs/site/plugins/webpackconf/src/index.js
@@ -0,0 +1,30 @@
+module.exports = function (context, options) {
+  return {
+    name: 'custom-docusaurus-plugin',
+    configureWebpack(config, isServer, utils) {
+      const {getCacheLoader} = utils;
+      return {
+        module: {
+          rules: [
+            {
+                test: /\.sh$/i,
+                use: 'raw-loader',
+            },
+            {
+              test: /\.cpp$/i,
+              use: 'raw-loader',
+            },
+            {
+              test: /\.py$/i,
+              use: 'raw-loader',
+            },
+            {
+              test: /\.txt$/i,
+              use: 'raw-loader',
+            },
+          ],
+        },
+      };
+    },
+  };
+};
diff --git a/docs/site/src/theme/CodeBlock.tsx b/docs/site/src/theme/CodeBlock.tsx
index 4ee78be9aecb556a1d94b3fbb935e4bb83a566b5..df6576064cef99667cb025df9b29b90eefca5743 100644
--- a/docs/site/src/theme/CodeBlock.tsx
+++ b/docs/site/src/theme/CodeBlock.tsx
@@ -1,12 +1,7 @@
-import { URL } from 'url'
-import React, { useReducer } from 'react'
+import React from 'react'
 import InitCodeBlock from '@theme-init/CodeBlock'
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import type { ReferenceCodeBlockProps, GitHubReference, DispatchMessage } from './types'
-import {DispatchTypes} from "./types";
-import useBaseUrl from '@docusaurus/useBaseUrl';
 
-const initialFetchResult = 'loading...';
 
 const noteStyle: React.CSSProperties = {
     textAlign: 'right',
@@ -18,7 +13,7 @@ export interface State {
     isCancelled: boolean
 }
 
-async function fetchCode (url: string,snippetTag:string, state: State,setFetchResultState: React.Dispatch<React.SetStateAction<string>>) {
+async function fetchCode(url: string, snippetTag: string, state: State, setFetchResultState: React.Dispatch<React.SetStateAction<string>>) {
     let res: Response
     try {
         if (!state.isCancelled) {
@@ -40,8 +35,8 @@ async function fetchCode (url: string,snippetTag:string, state: State,setFetchRe
     }
 
     let body = (await res.text()).split('\n')
-    const fromLine = body.indexOf(snippetTag+" start") + 1  || 0;
-    const toLine = body.indexOf(snippetTag+ " end",fromLine) -1 || undefined;
+    const fromLine = body.indexOf(snippetTag + " start") + 1 || 0;
+    const toLine = body.indexOf(snippetTag + " end", fromLine) - 1 || undefined;
     body = body.slice(fromLine, (toLine || fromLine) + 1)
 
     const preceedingSpace = body.reduce((prev: number, line: string) => {
@@ -60,8 +55,8 @@ async function fetchCode (url: string,snippetTag:string, state: State,setFetchRe
     setFetchResultState(body.map((line) => line.slice(preceedingSpace)).join('\n'));
 }
 
-function getVal(name: string,props: any) {
-    const codeRegex = new RegExp("(?:"+name+"=\")(.*?)(\")")
+function getVal(name: string, props: any) {
+    const codeRegex = new RegExp("(?:" + name + "=\")(.*?)(\")")
 
     let val = undefined
     if (props.metastring && codeRegex.test(props.metastring)) {
@@ -71,46 +66,41 @@ function getVal(name: string,props: any) {
 }
 
 function ReferenceCode(props: any) {
+    const codeBlockContent = getVal("content", props)
 
-    const [fetchResult, setFetchResultState] = React.useState(initialFetchResult);
-
-    const codeBlockLink = getVal("link",props)
-    const localLink = useBaseUrl("examples/"+codeBlockLink)
-    const {siteConfig} = useDocusaurusContext();
-    const version  = siteConfig.customFields.version;
-    const urlLink = "https://stash.desy.de/projects/ASAPO/repos/asapo/browse/examples/for_site/"+codeBlockLink+"?at="+version
-    if (!codeBlockLink) {
+    if (!codeBlockContent) {
         return (
-                <InitCodeBlock {...props}/>
+            <InitCodeBlock {...props}/>
         );
     }
-    const snippetTag = getVal("snippetTag",props)
-
-    React.useEffect(() => {
-        let isCancelled = {isCancelled:false};
-        fetchCode(localLink,snippetTag,isCancelled,setFetchResultState)
-        return () => {
-            isCancelled.isCancelled = true;
-        };
-    }, []);
-
+    const {siteConfig} = useDocusaurusContext();
+    const version = siteConfig.customFields.version;
+    const urlLink = "https://stash.desy.de/projects/ASAPO/repos/asapo/browse/examples/for_site/" + codeBlockContent + "?at=" + version
+
+    const snippetTag = getVal("snippetTag", props)
+    if (codeBlockContent) {
+        const content = require('../../../../examples/for_site/'+codeBlockContent);
+        let body = content.default.split('\n')
+        const fromLine = body.indexOf(snippetTag + " start") + 1 || 0;
+        const toLine = body.indexOf(snippetTag + " end", fromLine) - 1 || undefined;
+        body = body.slice(fromLine, (toLine || fromLine) + 1).join('\n')
+
+        const customProps = {
+            ...props,
+            children: body,
+        }
 
-    const customProps = {
-        ...props,
-        children: fetchResult
+        return (
+            <div>
+                <InitCodeBlock {...customProps}/>
+                <div style={noteStyle}>See full example on <a href={urlLink} target="_blank">BitBucket</a></div>
+            </div>
+        );
     }
-
-    return (
-        <div>
-            <InitCodeBlock {...customProps}/>
-            <div style={noteStyle}>See full example on <a href={urlLink} target="_blank">BitBucket</a></div>
-        </div>
-    );
 }
 
-
 export default function CodeBlock(props) {
     return (
-            <ReferenceCode {...props} />
+        <ReferenceCode {...props} />
     );
 }
\ No newline at end of file
diff --git a/examples/for_site/CMakeLists.txt b/examples/for_site/CMakeLists.txt
index 2c58fa1b548ae83c27363d716df89358a80220f2..1d2595b7e83a86a6d4b6660037fa4303b033f2d7 100644
--- a/examples/for_site/CMakeLists.txt
+++ b/examples/for_site/CMakeLists.txt
@@ -1 +1 @@
-configure_files(${CMAKE_CURRENT_SOURCE_DIR}/getting_started ${PROJECT_BINARY_DIR}/docs/site/static/examples/getting_started)
+configure_files(${CMAKE_CURRENT_SOURCE_DIR}/getting_started ${CMAKE_CURRENT_BINARY_DIR}/getting_started)
diff --git a/examples/for_site/getting_started/install_python_clients_pip.sh b/examples/for_site/getting_started/install_python_clients_pip.sh
index 117a4865bc6b596803fcfb8e43dc0d88413bc041..ea6c27511d108c5bed4b434b5de1b3c8a4fe04f8 100644
--- a/examples/for_site/getting_started/install_python_clients_pip.sh
+++ b/examples/for_site/getting_started/install_python_clients_pip.sh
@@ -8,5 +8,6 @@ pip3 install --user --trusted-host nims.desy.de --find-links=http://nims.desy.de
 # take a look at http://nims.desy.de/extra/asapo/linux_packages/ or http://nims.desy.de/extra/asapo/windows10 for your OS. E.g. for Debian 10.7
 # wget http://nims.desy.de/extra/asapo/linux_packages/debian10.7/asapo_producer-@ASAPO_VERSION@.tar.gz
 # wget http://nims.desy.de/extra/asapo/linux_packages/debian10.7/asapo_consumer-@ASAPO_VERSION@.tar.gz
+
 # pip3 install asapo_producer-@ASAPO_VERSION@.tar.gz
 # pip3 install asapo_consumer-@ASAPO_VERSION@.tar.gz
\ No newline at end of file