diff --git a/app/assets/javascripts/repository/components/blob_content_viewer.vue b/app/assets/javascripts/repository/components/blob_content_viewer.vue
index f6d370fb45035a0194db8a44a9b3094b7f338694..7999b916e0f6c42ae43ae5b5a367da8c16a70f5f 100644
--- a/app/assets/javascripts/repository/components/blob_content_viewer.vue
+++ b/app/assets/javascripts/repository/components/blob_content_viewer.vue
@@ -8,7 +8,7 @@ import createFlash from '~/flash';
 import axios from '~/lib/utils/axios_utils';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { __ } from '~/locale';
-import { redirectTo } from '~/lib/utils/url_utility';
+import { redirectTo, getLocationHash } from '~/lib/utils/url_utility';
 import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
 import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
@@ -63,6 +63,28 @@ export default {
         };
       },
       result() {
+        const urlHash = getLocationHash();
+        const plain = this.$route?.query?.plain;
+
+        // When the 'plain' URL param is present, its value determines which viewer to render:
+        // - when 0 and the rich viewer is available we render with it
+        // - otherwise we render the simple viewer
+        if (plain !== undefined) {
+          if (plain === '0' && this.hasRichViewer) {
+            this.switchViewer(RICH_BLOB_VIEWER);
+          } else {
+            this.switchViewer(SIMPLE_BLOB_VIEWER);
+          }
+          return;
+        }
+
+        // If there is a code line hash in the URL we render with the simple viewer
+        if (urlHash && urlHash.startsWith('L')) {
+          this.switchViewer(SIMPLE_BLOB_VIEWER);
+          return;
+        }
+
+        // By default, if present, use the rich viewer to render
         this.switchViewer(this.hasRichViewer ? RICH_BLOB_VIEWER : SIMPLE_BLOB_VIEWER);
       },
       error() {
@@ -173,6 +195,21 @@ export default {
       return this.blobInfo.storedExternally && this.blobInfo.externalStorage === LFS_STORAGE;
     },
   },
+  watch: {
+    // Watch the URL 'plain' query value to know if the viewer needs changing.
+    // This is the case when the user switches the viewer and then goes back
+    // through the hystory.
+    '$route.query.plain': {
+      handler(plainValue) {
+        this.switchViewer(
+          this.hasRichViewer && (plainValue === undefined || plainValue === '0')
+            ? RICH_BLOB_VIEWER
+            : SIMPLE_BLOB_VIEWER,
+          plainValue !== undefined,
+        );
+      },
+    },
+  },
   methods: {
     onError() {
       this.useFallback = true;
@@ -223,6 +260,22 @@ export default {
         this.loadLegacyViewer();
       }
     },
+    updateRouteQuery() {
+      const plain = this.activeViewerType === SIMPLE_BLOB_VIEWER ? '1' : '0';
+
+      if (this.$route?.query?.plain === plain) {
+        return;
+      }
+
+      this.$router.push({
+        path: this.$route.path,
+        query: { ...this.$route.query, plain },
+      });
+    },
+    handleViewerChanged(newViewer) {
+      this.switchViewer(newViewer);
+      this.updateRouteQuery();
+    },
     editBlob(target) {
       if (this.showForkSuggestion) {
         this.setForkTarget(target);
@@ -254,7 +307,7 @@ export default {
         :has-render-error="hasRenderError"
         :show-path="false"
         :override-copy="glFeatures.highlightJs"
-        @viewer-changed="switchViewer"
+        @viewer-changed="handleViewerChanged"
         @copy="onCopy"
       >
         <template #actions>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
index 7b62f0cdb7dcd36968d9f652fd7e1cdfc95feaf2..a689433b503363dcb302f582dad0091845a3f7e7 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk_line.vue
@@ -1,12 +1,9 @@
 <script>
-import { GlLink, GlSafeHtmlDirective } from '@gitlab/ui';
+import { GlSafeHtmlDirective } from '@gitlab/ui';
 import { setAttributes } from '~/lib/utils/dom_utils';
 import { BIDI_CHARS, BIDI_CHARS_CLASS_LIST, BIDI_CHAR_TOOLTIP } from '../constants';
 
 export default {
-  components: {
-    GlLink,
-  },
   directives: {
     SafeHtml: GlSafeHtmlDirective,
   },
@@ -60,15 +57,16 @@ export default {
 <template>
   <div class="gl-display-flex">
     <div class="gl-p-0! gl-absolute gl-z-index-3 gl-border-r diff-line-num line-numbers">
-      <gl-link
+      <a
         :id="`L${number}`"
         class="gl-user-select-none gl-ml-5 gl-pr-3 gl-shadow-none! file-line-num diff-line-num"
         :class="firstLineClass"
-        :to="`#L${number}`"
+        :href="`#L${number}`"
         :data-line-number="number"
+        data-testid="line-number-anchor"
       >
         {{ number }}
-      </gl-link>
+      </a>
     </div>
 
     <pre
diff --git a/spec/frontend/repository/components/blob_content_viewer_spec.js b/spec/frontend/repository/components/blob_content_viewer_spec.js
index 3f7d311060cd34d0318eee07ab67ae3def89e92d..0f7cf4e61b20fddd3beac5806f6c5c3c683542fb 100644
--- a/spec/frontend/repository/components/blob_content_viewer_spec.js
+++ b/spec/frontend/repository/components/blob_content_viewer_spec.js
@@ -21,12 +21,13 @@ import blobInfoQuery from '~/repository/queries/blob_info.query.graphql';
 import userInfoQuery from '~/repository/queries/user_info.query.graphql';
 import applicationInfoQuery from '~/repository/queries/application_info.query.graphql';
 import CodeIntelligence from '~/code_navigation/components/app.vue';
-import { redirectTo } from '~/lib/utils/url_utility';
+import * as urlUtility from '~/lib/utils/url_utility';
 import { isLoggedIn, handleLocationHash } from '~/lib/utils/common_utils';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import httpStatusCodes from '~/lib/utils/http_status';
 import LineHighlighter from '~/blob/line_highlighter';
 import { LEGACY_FILE_TYPES } from '~/repository/constants';
+import { SIMPLE_BLOB_VIEWER, RICH_BLOB_VIEWER } from '~/blob/components/constants';
 import {
   simpleViewerMock,
   richViewerMock,
@@ -53,7 +54,12 @@ const mockAxios = new MockAdapter(axios);
 const createMockStore = () =>
   new Vuex.Store({ actions: { fetchData: jest.fn, setInitialData: jest.fn() } });
 
-const createComponent = async (mockData = {}, mountFn = shallowMount) => {
+const mockRouterPush = jest.fn();
+const mockRouter = {
+  push: mockRouterPush,
+};
+
+const createComponent = async (mockData = {}, mountFn = shallowMount, mockRoute = {}) => {
   Vue.use(VueApollo);
 
   const {
@@ -106,6 +112,10 @@ const createComponent = async (mockData = {}, mountFn = shallowMount) => {
       apolloProvider: fakeApollo,
       propsData: propsMock,
       mixins: [{ data: () => ({ ref: refMock }) }],
+      mocks: {
+        $route: mockRoute,
+        $router: mockRouter,
+      },
       provide: {
         targetBranch: 'test',
         originalBranch: 'default-ref',
@@ -158,10 +168,11 @@ describe('Blob content viewer component', () => {
     it('renders a BlobHeader component', async () => {
       await createComponent();
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(true);
       expect(findBlobHeader().props('blob')).toEqual(simpleViewerMock);
+      expect(mockRouterPush).not.toHaveBeenCalled();
     });
 
     it('copies blob text to clipboard', async () => {
@@ -179,7 +190,7 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().props('activeViewer')).toEqual({
         fileType: 'text',
         tooLarge: false,
-        type: 'simple',
+        type: SIMPLE_BLOB_VIEWER,
         renderError: null,
       });
     });
@@ -247,10 +258,11 @@ describe('Blob content viewer component', () => {
     it('renders a BlobHeader component', async () => {
       await createComponent({ blob: richViewerMock });
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(RICH_BLOB_VIEWER);
       expect(findBlobHeader().props('hasRenderError')).toEqual(false);
       expect(findBlobHeader().props('hideViewerSwitcher')).toEqual(false);
       expect(findBlobHeader().props('blob')).toEqual(richViewerMock);
+      expect(mockRouterPush).not.toHaveBeenCalled();
     });
 
     it('renders a BlobContent component', async () => {
@@ -260,30 +272,49 @@ describe('Blob content viewer component', () => {
       expect(findBlobContent().props('activeViewer')).toEqual({
         fileType: 'markup',
         tooLarge: false,
-        type: 'rich',
+        type: RICH_BLOB_VIEWER,
         renderError: null,
       });
     });
 
-    it('updates viewer type when viewer changed is clicked', async () => {
+    it('changes to simple viewer when URL has code line hash', async () => {
+      jest.spyOn(urlUtility, 'getLocationHash').mockReturnValueOnce('L5');
+
       await createComponent({ blob: richViewerMock });
 
       expect(findBlobContent().props('activeViewer')).toEqual(
         expect.objectContaining({
-          type: 'rich',
+          type: SIMPLE_BLOB_VIEWER,
+        }),
+      );
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
+    });
+
+    it('updates viewer type when viewer changed is clicked', async () => {
+      await createComponent({ blob: richViewerMock }, shallowMount, { path: '/mock_path' });
+
+      expect(findBlobContent().props('activeViewer')).toEqual(
+        expect.objectContaining({
+          type: RICH_BLOB_VIEWER,
         }),
       );
-      expect(findBlobHeader().props('activeViewerType')).toEqual('rich');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(RICH_BLOB_VIEWER);
 
-      findBlobHeader().vm.$emit('viewer-changed', 'simple');
+      findBlobHeader().vm.$emit('viewer-changed', SIMPLE_BLOB_VIEWER);
       await nextTick();
 
-      expect(findBlobHeader().props('activeViewerType')).toEqual('simple');
+      expect(findBlobHeader().props('activeViewerType')).toEqual(SIMPLE_BLOB_VIEWER);
       expect(findBlobContent().props('activeViewer')).toEqual(
         expect.objectContaining({
-          type: 'simple',
+          type: SIMPLE_BLOB_VIEWER,
         }),
       );
+      expect(mockRouterPush).toHaveBeenCalledWith({
+        path: '/mock_path',
+        query: {
+          plain: '1',
+        },
+      });
     });
   });
 
@@ -503,12 +534,12 @@ describe('Blob content viewer component', () => {
 
     it('simple edit redirects to the simple editor', () => {
       findWebIdeLink().vm.$emit('edit', 'simple');
-      expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
+      expect(urlUtility.redirectTo).toHaveBeenCalledWith(simpleViewerMock.editBlobPath);
     });
 
     it('IDE edit redirects to the IDE editor', () => {
       findWebIdeLink().vm.$emit('edit', 'ide');
-      expect(redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
+      expect(urlUtility.redirectTo).toHaveBeenCalledWith(simpleViewerMock.ideEditPath);
     });
 
     it.each`
@@ -543,4 +574,32 @@ describe('Blob content viewer component', () => {
       },
     );
   });
+
+  describe('active viewer based on plain attribute', () => {
+    it.each`
+      hasRichViewer | plain  | activeViewerType
+      ${true}       | ${'0'} | ${RICH_BLOB_VIEWER}
+      ${true}       | ${'1'} | ${SIMPLE_BLOB_VIEWER}
+      ${false}      | ${'0'} | ${SIMPLE_BLOB_VIEWER}
+      ${false}      | ${'1'} | ${SIMPLE_BLOB_VIEWER}
+    `(
+      'activeViewerType is `$activeViewerType` when hasRichViewer is $hasRichViewer and plain is set to $plain',
+      async ({ hasRichViewer, plain, activeViewerType }) => {
+        await createComponent(
+          { blob: hasRichViewer ? richViewerMock : simpleViewerMock },
+          shallowMount,
+          { query: { plain } },
+        );
+
+        await nextTick();
+
+        expect(findBlobContent().props('activeViewer')).toEqual(
+          expect.objectContaining({
+            type: activeViewerType,
+          }),
+        );
+        expect(findBlobHeader().props('activeViewerType')).toEqual(activeViewerType);
+      },
+    );
+  });
 });
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
index eb2eec92534e9dce798940e04ea62840975a2d9e..9a63f566dec1fe4cb0accc76f0c4a9b4f39388b6 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/chunk_line_spec.js
@@ -1,4 +1,3 @@
-import { GlLink } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ChunkLine from '~/vue_shared/components/source_viewer/components/chunk_line.vue';
 import {
@@ -20,7 +19,7 @@ describe('Chunk Line component', () => {
     wrapper = shallowMountExtended(ChunkLine, { propsData: { ...DEFAULT_PROPS, ...props } });
   };
 
-  const findLink = () => wrapper.findComponent(GlLink);
+  const findLink = () => wrapper.findByTestId('line-number-anchor');
   const findContent = () => wrapper.findByTestId('content');
   const findWrappedBidiChars = () => wrapper.findAllByTestId('bidi-wrapper');
 
@@ -50,7 +49,7 @@ describe('Chunk Line component', () => {
     it('renders a line number', () => {
       expect(findLink().attributes()).toMatchObject({
         'data-line-number': `${DEFAULT_PROPS.number}`,
-        to: `#L${DEFAULT_PROPS.number}`,
+        href: `#L${DEFAULT_PROPS.number}`,
         id: `L${DEFAULT_PROPS.number}`,
       });