learningequality
Misindentation in Code Examples after Migrating to Use DocsExample Component
❌ This issue is not open for contribution. Visit Contributing guidelines to learn about the contributing process and how to find suitable issues.
Description:
After migrating the documentation examples to use the new DocsExample component , we observed that code snippets – particularly import statements – are displaying with slight misindentation in the UI. Previously, when these code examples were rendered outside the DocsShow component, the indentation appeared correct. With the migration, it seems that the inclusion of these examples within the DocsExample (and ultimately DocsShowCode) component is causing the misindentation.
Steps to Reproduce:
-
Migrate a documentation example (e.g., the KCardGrid example) to use the DocsExample component, moving the example code to a separate file in docs/examples/KCardGrid/.
-
View the rendered documentation page and inspect the code examples, particularly around import statements.
-
Note that the code appears misindented compared to the expected display from previous versions.
Expected Behavior: The code examples should render with proper indentation that mirrors the raw code.
Observed Behavior: The code examples, especially the import statements, are slightly misindented. This issue appears to be consistent across various migrated components, suggesting a common underlying cause.
References: PR - #978 , #975
Screenshots :
Deploy Preview of Kcardgrid after migration :
[Observe the misindentation in Script tag of "Loading state"/"Fine-tuning Responsiveness"]
Link to Deploy Preview -- https://deploy-preview-978--kolibri-design-system.netlify.app/kcardgrid
Hello! I've recently submitted a GSOC proposal for this organization and I am excited to start my first contribution with this issue. I'd love to work on it. Could you please assign it to me?
Hello! I've recently submitted a GSOC proposal for this organization and I am excited to start my first contribution with this issue. I'd love to work on it. Could you please assign it to me?
cc : @MisRob , @EshaanAgg
@Bindu2020324 , Thanks for your interest in solving this issue . Unfortunately , i can't assign you because i am a contributor here too and do not have authority to assign.
Thank you so much for your reply! I really appreciate your help. I’ll wait for a maintainer to assign the issue. I’ve submitted a GSoC proposal and I’m excited to contribute, so I’m looking forward to working on this when it's available.
